test case failing due to .map is not a function error

Question

Hi i have a react component expenses-total.js and a corresponding test case expenses-total.test.js as shown below.

expenses-total.js

     export default (expenses=[]) => {
      if (expenses.length === 0) {
        return 0;
      } else {
        return expenses
          .map(expense => expense.amount)
          .reduce((sum, val) => sum + val, 0);
      }
    };

expenses-total.test.js

import selectExpensesTotal from '../../selectors/expenses-total';
const expenses = [
    {
      id: "1",
      description: "gum",
      amount: 321,
      createdAt: 1000,
      note: ""
    },
    {
      id: "2",
      description: "rent",
      amount: 3212,
      createdAt: 4000,
      note: ""
    },
    {
      id: "3",
      description: "Coffee",
      amount: 3214,
      createdAt: 5000,
      note: ""
    }
  ];

test('Should return 0 if no expenses', ()=>{
    const res = selectExpensesTotal([]);
    expect(res).toBe(0);
});

test('Should correctly add up a single expense', ()=>{
    const res = selectExpensesTotal(expenses[0]);
    expect(res).toBe(321);
});

test('Should correctly add up multiple expenses',()=>{
    const res = selectExpensesTotal(expenses);
    expect(res).toBe(6747);
});

when i run the test case, its getting failed by giving an error

TypeError: expenses.map is not a function

I know the test case is correct but dont know what is wrong with thecomponent. Could anyone please help me in fixing this error?

score 2 · Answer 1 · answered Dec 12 '18 at 22:31

2

The problem is with if (expenses.length === 0) and the test case that uses selectExpensesTotal(expenses[0]):

expenses[0] passes an object, which has no length property, so in the function being tested, expenses.length returns undefined. However, undefined === 0 evaluates to false so your code goes into the else block tries to use .map on the object, which doesn't have that function, thus it throws an error.

answered Dec 12 '18 at 22:31

Herohtar

5,347
4
31
41

hi thanks for your answer, what would be the alternate option to get this done? – Shivakumar H.G Dec 12 '18 at 22:41
@ShivakumarH.G Take a look at [this question](https://stackoverflow.com/questions/4775722/check-if-object-is-an-array) for options. – Herohtar Dec 12 '18 at 22:42

kind user · Answer 2 · 2018-12-12T22:37:33.997

0

In a brief: you can't map over an object.

expenses is an array of objects, so expenses[0] is an object.

Condition expenses.length === 0 evaluates to false, since obviously .length property does not exist on Object.prototype, so the else condition takes place - your function tries to map over an object.

edited Dec 12 '18 at 22:37

answered Dec 12 '18 at 22:30

kind user

40,029
7
67
77

Just to clarify, `.length` doesn't exist on *this* object, but it most certainly **can** exist on objects (just not by default). – Herohtar Dec 12 '18 at 22:36
1

@Herohtar Agreed, `Object.prototype` is much more accurate term. – kind user Dec 12 '18 at 22:38

score 0 · Answer 3 · answered Dec 13 '18 at 00:01

The problem is that expenses[0] is an object (you probably expected it to be an array) and an object does not have a map function. A quick hack would be to add another ifs into the loop to check if expenses is actually an object. So that:

export default (expenses=[]) => {
  if (expenses.length === 0) {
    return 0;
  } else {
    if (typeof expenses === 'object') {
      return expenses.amount
    } else {
    return expenses
      .map(expense => expense.amount)
      .reduce((sum, val) => sum + val, 0);
    }
  }
};

I hope this help.

Emmanuel Akosa · Answer 4 · 2022-06-27T11:30:07.657

To fix this error, you can pass in an array of object into

selectExpensesTotal([expenses[0]])

rather than just an object

selectExpensesTotal(expenses[0])

So your code show look like this:

test('Should correctly add up a single expense', ()=>{
    const res = selectExpensesTotal([expenses[0]]);
    expect(res).toBe(321);
});

.map function will now work on expenses. Because, this is now an array of object ( works with map function ) and not an object(This does not work with map function)

test case failing due to .map is not a function error

4 Answers4