React Testing: Cannot read property 'toLowerCase' of undefined

Question

I am testing a react component using Mocha, Chai and Enzyme. The component is

TodoList.js

export class TodoList extends Component {
    render() {
        var {todos, searchText, showCompleted, isFetching} = this.props;
        var renderTodos = () => {
                    if(isFetching){
                         return (
                            <div className='container__message'>
                                <PulseLoader color="#bbb" size="6px" margin="1.5px" />
                            </div>
                         );
                    }
                    if(todos.length === 0){
                        return <p className='container__message'>Nothing to show</p>
                    }
                return TodoAPI.filterTodos(todos, showCompleted, searchText).map((todo) => {
                    return (
                        <Todo key={todo.id} {...todo} />
                    )
                });
        }
        return ( 
            <div>
                {renderTodos()}
            </div>
        );
    }
}

export default connect(
  (state) => {
    return state;
  }
)(TodoList);

This component uses another function which is

TodoAPI.js

import $ from 'jquery';

module.exports = {
    filterTodos: function(todos, showCompleted, searchText){
        var filteredTodos = todos;

        filteredTodos = filteredTodos.filter((todo) => {
            return !todo.completed || showCompleted; // todo is not completed or showCompleted is toggled
        });

        console.log(filteredTodos);


        filteredTodos = filteredTodos.filter((todo) => {
            console.log(todo.text);
            return todo.text.toLowerCase().indexOf(searchText.toLowerCase()) !== -1;
        });

        filteredTodos.sort((a, b) => {
            if(!a.completed && b.completed){
                return -1;
            } else if(a.completed && !b.completed){
                return 1;
            } else {
                return 0;
            }
        });
        return filteredTodos;
    }
};

The test which I have written tests that TodoList.js renders 2 Todo components as I have provided an array of two objects. TodoList.spec.js

import React from 'react';
import ConnectedTodoList, {TodoList} from '../../src/components/TodoList';

describe('TodoList', function(){
    let todos = [
            {
                id: 1,
                text: 'some dummy text',
            }, 
            {
                id: 2,
                text: 'some more dummy text',
            }
    ];
    beforeEach(function(){
         this.wrapper = shallow(<TodoList todos={todos} />);
    });

    it('should exist', function(){     
        expect(this.wrapper).to.exist;
    });

    it('should display 2 Todos', function(){
        expect(this.wrapper.find('Todo')).to.have.lengthOf(2);
    });
})

But when I execute this test I get an error which says

 1) TodoList "before each" hook for "should exist":
    TypeError: Cannot read property 'toLowerCase' of undefined
     at F:/Study Material/Web/React Projects/ReactTodoApp/src/api/TodoAPI.js:16:43

Answer 1

Your issues stems from this line in TodoList.js:

var {todos, searchText, showCompleted, isFetching} = this.props;

This is expecting all of these values to be passed as props to the TodoList component. As searchText is not provided in the tests, it has the value undefined when it gets passed to filterTodos where searchText.toLowerCase() is eventually called, causing the error.

Changing the beforeEach section of your tests to:

beforeEach(function(){
     this.wrapper = shallow(<TodoList todos={todos} searchText='dummy' />);
});

should solve the issue. You should probably also provide showCompleted and isFetching so that you aren't relying on defaults.

Answer 2

Best guess without running the code myself is that searchText is undefined and so when you call toLowerCase on it in the TodoAPI the function cannot be called.

The only other place you have used toLowerCase is on the todo text itself which you provide through a prop.