用 Jest 和 Enzyme 测试 React 组件。错误：无法读取地图的属性未定义

Question

所以我无法从父组件中获取 todos，也无法自己成功设置它们。在这一点上，我并不想特别测试任何东西。只是组件“存在”而没有错误

组件代码：

import React, { Component } from 'react';

import TodoItem from './TodoItem';

class TodoList extends Component {
    renderTodos = () => {
        const { todos } = this.props;
        return todos.map(todo => {
            return <TodoItem key={todo.id} {...todo} />;
        });
    };
    render() {
        return (
            <div>
                {this.renderTodos()}
            </div>
        );
    }
}

export default TodoList;

测试代码：

import React from 'react';
import { shallow } from 'enzyme';
import renderer from 'react-test-renderer';

import TodoList from './TodoList';
import TodoItem from './TodoItem';

describe(TodoList, () => {
    const todos = [
        {
            id: 1,
            text: 'Walk the walk'
        },
        {
            id: 2,
            text: 'Talk the talk'
        }
    ];
    const component = shallow(<TodoList todos={todos} />);

    it('should exist', () => {
        const component = renderer.create(<TodoList />);
        const tree = component.toJSON();
        expect(tree).toMatchSnapshot();
    });
});

请帮忙。对 Jest 很陌生，对一般测试也很陌生。

Answer 1

当您创建组件的浅实例时，您需要传递您正在使用的道具，而无需在组件中进行条件检查

const component = shallow(<TodoList todos={[]}/>);

和

const component = renderer.create(<TodoList todos={[]}/>);