反应 + 柴 + 酶

Question

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

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;

这是我的测试。其中两个已通过（两个组件都存在）但其他两个在 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：类型错误：无法读取未定义的属性 'map' 2) TaskItem 应呈现无序列表的一项：类型错误：无法读取未定义的属性 'name'

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}/>);

反应 + 柴 + 酶

React + Chai + Enzyme

unit-testing

chai

reactjs

enzyme