反应测试:无法读取未定义的属性'toLowerCase'
问题描述:
我正在使用Mocha,Chai和Enzyme测试反应组分。该组件是反应测试:无法读取未定义的属性'toLowerCase'
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
答
你的问题,从该行茎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
,以便您不依赖默认设置。
答
的最佳答案,但不运行的代码我是SEARCHTEXT是不确定的,所以当你调用toLowerCase错误在TodoAPI上它的功能不能被调用。
你已经使用toLowerCase唯一的其他地方是在TODO文本本身,你通过一个道具提供。
感谢迈克尔这个详细的答案。 :) –