Question

我现在已经玩了好几天，但却无法获得一个简单的.toMatchSnapshot＆＃39;通过。我显然不明白这是如何运作的。我应该更改我的代码或测试的设置吗？

代码：

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 \ components \ TodoList.test.js ●TodoList>遇到声明异常

TypeError: filteredTodos.filter is not a function

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

所以它对我的TodoAPI有误，但我不知道如何解决这个问题。这是TodoAPI.js＆＃39;

中的代码

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）中的函数。这些功能可以通过自己的单元测试进行测试。

无法通过jest快照匹配进行传递

1 个答案: