反应测试：无法读取未定义的属性'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

来源

2017-04-15 Rehan Ahmed

你的问题，从该行茎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，以便您不依赖默认设置。

来源

2017-04-15 14:13:19

感谢迈克尔这个详细的答案。 :) –

的最佳答案，但不运行的代码我是SEARCHTEXT是不确定的，所以当你调用toLowerCase错误在TodoAPI上它的功能不能被调用。

你已经使用toLowerCase唯一的其他地方是在TODO文本本身，你通过一个道具提供。

来源

2017-04-15 14:12:40

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

回答

相关问题