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中调用它上面的函数时，无法调用该函数。

你习惯使用的唯一其他地方是在你通过道具提供的待办文本本身。

Answer 2

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

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

这需要将所有这些值作为props传递给TodoList组件。由于测试中未提供searchText，因此当它传递给最终调用undefined的{{1}}时，其值为filterTodos，从而导致错误。

将测试的searchText.toLowerCase()部分更改为：

beforeEach

应该解决问题。您可能还应该提供beforeEach(function(){ this.wrapper = shallow(<TodoList todos={todos} searchText='dummy' />); });和showCompleted，这样您就不会依赖默认设置。

反应测试：无法读取属性＆to to ofLowerCase＆＃39;未定义的

2 个答案: