javascript - React Testing: Cannot read property 'toLowerCase' of undefined - Stack Overflow

admin管理员组

文章数量:1424929

I am testing a react ponent using Mocha, Chai and Enzyme. The ponent 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 ponent 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 !todopleted || showCompleted; // todo is not pleted 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(!apleted && bpleted){
                return -1;
            } else if(apleted && !bpleted){
                return 1;
            } else {
                return 0;
            }
        });
        return filteredTodos;
    }
};

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

import React from 'react';
import ConnectedTodoList, {TodoList} from '../../src/ponents/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

I am testing a react ponent using Mocha, Chai and Enzyme. The ponent 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 ponent 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.pleted || showCompleted; // todo is not pleted 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.pleted && b.pleted){
                return -1;
            } else if(a.pleted && !b.pleted){
                return 1;
            } else {
                return 0;
            }
        });
        return filteredTodos;
    }
};

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

import React from 'react';
import ConnectedTodoList, {TodoList} from '../../src/ponents/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

• javascript
• reactjs
• testing
• mocha.js
• enzyme

Share Improve this question Follow edited Apr 15, 2017 at 14:04 Rehan Ahmed asked Apr 15, 2017 at 13:37 Rehan AhmedRehan Ahmed 7311 gold badge11 silver badge66 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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 ponent. 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.

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.

本文标签： javascriptReact Testing Cannot read property 39toLowerCase39 of undefinedStack Overflow