React + Chai +酶

Question

我正在尝试对我的React应用程序运行一些Chai&Enzyme的单元测试。

酶似乎对我传递给组件的道具有问题。它们在测试中没有定义(而不是在应用程序中)。

主文件：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import TaskList from './components/task_list';
import AddingInput from './components/input';

const titleHeader = <h1 className="app__title">Simple to-do list:</h1>;

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            tasks: [
                {id: 0, name: 'Complete task'},
                {id: 1, name: 'Add task'},
                {id: 2, name: 'Delete task'}
            ],
            id: 3,
        };
    }

(...)

  render () {
    return (
        <div className="app">
        {titleHeader}
        <TaskList
            tasks={this.state.tasks}
            deleteMe={this.deleteMe.bind(this)} />
        <AddingInput addTodo={this.addTodo.bind(this)} />
        </div>
    );
  }
}

ReactDOM.render(
<App />,
    document.getElementById('root')
);

Task_list -我要测试的第一个组件：

import React from 'react';
import TaskItem from './task_item';

const TaskList = (props) => {
    const taskItems = props.tasks.map((task) => {
        return (
            <TaskItem
                key={task.id}
                task={task}
                deleteMe={props.deleteMe}
                />
        );
    });

    return (
        <ol className="ordered-list">
            {taskItems}
        </ol>
    );
};

export default TaskList;

第二个是：

import React from 'react';

const TaskItem = React.createClass({
  onCompleted: function(e) {
    e.target.className += " ordered-list__item--completed"
  },
  render: function() {

    return (
        <li><span className="ordered-list__item" onClick={this.onCompleted}>{this.props.task.name}</span>
            <span onClick={() => this.props.deleteMe(this.props.task)}
                  className='btn btn--delete'>Delete</span>
        </li>
    );
  }
});


export default TaskItem;

A这是我的测试。其中两个被传递(两个组件都存在)，但另外两个在props.tasks上未定义

import React from 'react';
import { expect, assert } from 'chai';
import { shallow, mount } from 'enzyme';
import TaskList from './src/components/task_list';
import TaskItem from './src/components/task_item';

describe('TaskList', () => {
    it('should render TaskItem', () => {
        const wrapper = shallow(<TaskList />);
        expect(wrapper.containsAllMatchingElements([
            <TaskItem />,
        ])).to.equal(true);
    });
    it('should exists', () => {
        assert.isDefined(TaskList)
    })
});
describe('TaskItem', () => {
    it('should render one item of unordered list', () => {
        const item = mount(<TaskItem />);
        expect(item).to.contain('li');
    });
    it('should exists', () => {
        assert.isDefined(TaskList)
    })
});

问题: 1) TaskList应该呈现TaskItem: TypeError:无法读取未定义的属性'map‘2) TaskItem应该呈现无序列表的一项: TypeError:无法读取未定义的属性’TaskItem‘

Answer 1

您的App组件传递了一个tasks属性：

<TaskList
    tasks={this.state.tasks}
    deleteMe={this.deleteMe.bind(this)} />

TaskList希望它始终存在。类似地，TaskItem希望(从TaskList)总是有某些可用的道具。

如果你在你的单元测试中添加了必要的道具，它应该可以工作。对于TaskList，这可能类似于以下内容(未经测试)：

const tasks = [
    {id: 0, name: 'Complete task'},
    {id: 1, name: 'Add task'},
    {id: 2, name: 'Delete task'}
];
const wrapper = shallow(<TaskList tasks={tasks}/>);