jestスナップショットの一致をパスすることができません。どんな助けにも大いに感謝しています

Question

私は数日前にこれを試してきましたが、単純な '.toMatchSnapshot'を渡すことはできません。私は明らかにこの仕組みが理解できません。私のコードやテストの設定を変更する必要がありますか？

コード：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { ListGroup, ListGroupItem } from 'react-bootstrap'; 
import TodoItem from './TodoItem'; 
import TodoAPI from '../api/TodoAPI'; 

export class TodoList extends Component { 
    renderTodos =() => { 
     const { todos, toggleShowCompleted, searchInput } = this.props; 
     if (todos.length === 0) { 
      return (
       <div> 
        <p>Nothing Scheduled To Do</p> 
        <hr /> 
       </div> 
      ); 
     } 
     return TodoAPI.filterTodos(
      todos, 
      toggleShowCompleted, 
      searchInput 
     ).map(todo => { 
      return (
       <ListGroupItem key={todo.id}> 
        <TodoItem {...todo} /> 
       </ListGroupItem> 
      ); 
     }); 
    }; 
    render() { 
     return (
      <ListGroup> 
       {this.renderTodos()} 
      </ListGroup> 
     ); 
    } 
} 

function mapStateToProps({ todos, toggleShowCompleted, searchInput }) { 
    return { toggleShowCompleted, searchInput, todos }; 
} 

export default connect(mapStateToProps)(TodoList); 

テスト：

import React from 'react'; 
import { shallow } from 'enzyme'; 
import { TodoList } from './TodoList'; 

describe('TodoList',() => { 
    const props = { 
     todos: { id: 1234, text: 'walk the cat' }, 
     toggleShowCompleted: false, 
     searchInput: '' 
    }; 
    const todoList = shallow(<TodoList {...props} />); 

    it('renders properly',() => { 
     expect(todoList).toMatchSnapshot(); 
    }); 
}); 

エラー：

FAILのsrc \コンポーネント\ TodoList.test.js ●todolistの>は、宣言の例外が発生しました

FAIL src \ components \ TodoList.test.js ●todolistの>は、それが私のTodoAPI上erroringだが、私はこの問題を解決するかどうかはわかりません宣言例外に

TypeError: filteredTodos.filter is not a function 

    at Object.filterTodos (src/api/TodoAPI.js:27:33) 

に遭遇しました。こっちのコードが「TodoAPI.js」

const APIFunctions = { 
    setTodos(todos) { 
     if (Array.isArray(todos)) { 
      localStorage.setItem('todos', JSON.stringify(todos)); 
      // return original array if if fails 
      return todos; 
     } 
    }, 

    getTodos() { 
     const stringTodos = localStorage.getItem('todos'); 
     let todos = []; 

     try { 
      todos = JSON.parse(stringTodos); 
     } catch (e) { 
      // stick with default array 
     } 

     // insure we actaully have an array and not any malicious code 
     return Array.isArray(todos) ? todos : []; 
    }, 

    filterTodos(todos, showCompleted, searchInput) { 
     var filteredTodos = todos; 
     // filter by showCompleted 
     filteredTodos = filteredTodos.filter(todo => { 
      // if todo.completed === false continue to show the todo OR if showCompleted === true continue to show todo 
      return !todo.completed || showCompleted; 
     }); 
     // filter by searchText 
     filteredTodos = filteredTodos.filter(todo => { 
      const text = todo.text.toLowerCase(); 
      return searchInput.length === 0 || todo.text.indexOf(searchInput) > -1; 
     }); 
     // sort todos with non-completed first 
     filteredTodos.sort((a, b) => { 
      // if a is not completed and b is completed a should come before b 
      if (!a.completed && b.completed) { 
       return -1; 
       // if a is completed and b isn't completed b should come before b 
      } else if (a.completed && !b.completed) { 
       return 1; 
      } else { 
       // a is equal to b and thus, no reason to sort 
       return 0; 
      } 
     }); 
     return filteredTodos; 
    }, ... 

Answer 1

であるあなたのユニットテストは、小道具todosがオブジェクトに設定しますが、あなたのTodoAPI. filterTodos方法ではなく、配列を期待しているようです。 JavaScriptのオブジェクトにはfilterメソッドがないため、エラーメッセージが表示されますが、配列はエラーメッセージです。

私のアドバイス：早い機会に、エラーのこれらの種類をキャッチするためにあなたのコンポーネントの

• 使用propTypes。
• TodoAPI.filterTodosのような模擬方法を推奨します。スナップショットテストでは、通常、コンポーネントが呼び出すfilterTodosのような他のモジュールの関数ではなく、コンポーネントをテストする必要があります。このような機能は、独自の単体テストでテストできます。