反應測試：無法讀取未定義的屬性'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'

回答

相關問題