反应测试：无法读取未定义的属性“ toLowerCase”

Question

我正在使用Mocha，Chai和Enzyme测试反应成分。 该组件是

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

该组件使用另一个功能是

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

不亲自运行代码的最佳猜测是searchText是未定义的，因此，当您在TodoAPI中对其调用toLowerCase时，无法调用该函数。

您以前使用过的其他较低位置仅在您通过道具提供的待办事项文本上。

Answer 2

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

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

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

将测试的beforeEach部分更改为：

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

应该解决问题。 您可能还应该提供showCompleted和isFetching以免依赖默认值。