Reactjs Can'；无法获得要通过的jest快照匹配

我已经玩了几天了，但是没有一个简单的“.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);

所以我的TodoAPI出错了，但我不确定如何解决这个问题。下面是“TodoAPI.js”中over的代码

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;
    }, ...

---

单元测试将prop

todos

设置为一个对象，而不是

TodoAPI。filterTodos

方法似乎需要一个数组。JavaScript中的对象没有

过滤器

方法，因此会显示错误消息，而数组则有

我的忠告是:

• 在组件上使用propTypes尽早捕获此类错误
• 更喜欢模拟方法，如

  TodoAPI.filterTodos

  。在快照测试中，您通常希望测试组件，而不是组件调用的其他模块（如

  filterTodos

  ）中的功能。这些函数可以用它们自己的单元测试进行测试

---

非常感谢您！我经历了很多次，但都没有记录下来。非常感谢你和所有那些继续在这个网站上教育像我这样的新手的人。只是在我的项目中添加了道具。甚至都不知道这个存在。现在，错误信息更加丰富：）太好了，很高兴能提供帮助。

TypeError: filteredTodos.filter is not a function

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

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;
    }, ...