反応テスト：未定義の 'toLowerCase'プロパティを読み取ることができません

Question

私は、Mocha、Chai、Enzymeを使用して反応成分をテストしています。コンポーネントは、このコンポーネントは、私はTodoList.jsのレンダリングテストを書かれている

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

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

あります私は2つのオブジェクトの配列を提供している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); 
    }); 
}) 

しかし、私はこのテストを実行するとき、私は自分自身が検索テキストが定義されていないということですので、あなたがtoLowerCaseメソッドを呼び出すときに、コードを実行せずに

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

あなたの問題はTodoList.jsに、このラインから茎：

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

これは、これらの値の全てがTodoListコンポーネントへpropsとして渡されることが期待されます。テストにsearchTextが指定されていないため、最終的にsearchText.toLowerCase()が呼び出されたfilterTodosに渡されると値はundefinedになり、エラーが発生します。

にあなたのテストのbeforeEachセクションを変更：

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

すると、この問題を解決する必要があります。おそらくデフォルトに頼っていないようにshowCompletedとisFetchingも提供するべきです。

Answer 2

ベストの推測を言うエラーが出ますそれをTodoAPIで呼び出すことはできません。

あなたがローパワーケースに使用した唯一の他の場所は、あなたが小道具で提供するtodoテキストそのものです。