javascript - react 测试 : Cannot read property 'toLowerCase' of undefined

Question

我正在使用 Mocha、Chai 和 Enzyme 测试 react 组件。该组件是

待办列表.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);

这个组件使用另一个函数是

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;
    }
};

我编写的测试测试了 TodoList.js 呈现 2 个 Todo 组件，因为我提供了一个包含两个对象的数组。 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);
    });
})

但是当我执行这个测试时，我得到一个错误，上面写着

 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

您的问题源于 TodoList.js 中的这一行:

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

这期望所有这些值都作为 props 传递给 TodoList 组件。由于测试中未提供 searchText，当它传递给 filterTodos 时，它的值为 undefined，其中 searchText.toLowerCase() 最终被调用，导致错误。

将测试的 beforeEach 部分更改为:

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

应该可以解决问题。您可能还应该提供 showCompleted 和 isFetching，这样您就不会依赖默认值。