使用 mocha 对反应组件进行单元测试

Question

我正在研究Redux 生态系统的 TodoMVC 示例。我已经完成了示例的工作代码，现在正在为应用程序的每个元素创建测试。

对于 action 和 reducer，测试非常简单，但对于组件，编写测试被证明更具挑战性。

我的一般组件架构如下所示：

Home.js
      \-App.js
              \-TodoList.js
                          \-TodoItem.js
                                       \-TodoInput.js

为 TodoInput.js 编写单元测试相对简单：

TodoInput.js：

handleChange(e) {
    this.setState({ text: e.target.value });
  }

...

  render() {

    return (
      <input type="text" autoFocus='true'
            className={classnames({
              edit: this.props.editing,
              'new-todo': this.props.newTodo
             })}
            value={this.state.text}
            placeholder={this.props.placeholder}
            onKeyDown={this.handleKeyDown.bind(this)}
            onBlur={this.handleBlur.bind(this)}
            onChange={this.handleChange.bind(this)}>
      </input>
    );
  }

TodoInput-test.js：

const mockedTodo = {
  text: 'abc123',
  complete: false
};


it(`should update text from user input`, () => {
      const component = TestUtils.renderIntoDocument(
        <TodoInput
          text = {mockedTodo.text}
          editing = {false}
          onSave = {_.noop}
        />
      );

      const inputComponent = TestUtils.findRenderedDOMComponentWithTag(component, 'input');

      expect(React.findDOMNode(inputComponent).value).toBe(mockedTodo.text);

      TestUtils.Simulate.change(React.findDOMNode(inputComponent), {target: {value: "newValue"}});

      expect(React.findDOMNode(inputComponent).value).toBe("newValue");

      React.unmountComponentAtNode(React.findDOMNode(component));
});

但对于 TodoItem.js，测试有点棘手。

渲染代码分支基于是否在项目上设置了editing 标志：

TodoItem.js：

import React, { Component, PropTypes } from 'react';
import TodoInput from './TodoInput';
import classnames from 'classnames';

export default class TodoItem extends Component {

  static propTypes = {
    todo: PropTypes.object.isRequired,
    editTodo: PropTypes.func.isRequired,
    markTodoAsComplete: PropTypes.func.isRequired,
    deleteTodo: PropTypes.func.isRequired
  }

  constructor(props, context) {
    super(props, context);
    this.state = {
      editing: false
    };
  }

  handleDoubleClick() {
    this.setState({ editing: true });
  }


  handleSave(id, text) {
    if (text.length === 0) {
      this.props.deleteTodo(id);
    } else {
      this.props.editTodo(id, text);
    }
    this.setState({ editing: false });
  }

  render() {
    const {todo, markTodoAsComplete, deleteTodo} = this.props;
    let element;

    if (this.state.editing) {
      element = (
        <TodoInput text={todo.text}
                       editing={this.state.editing}
                       onSave={(text) => this.handleSave(todo.id, text)} />
      );
    } else {
      element = (
        <div className='view'>
          <label onDoubleClick={this.handleDoubleClick.bind(this)}>
            {todo.text}
          </label>
          <input className='markComplete'
                 type='checkbox'
                 checked={todo.complete}
                 onChange={() => markTodoAsComplete(todo)} />
          <button className='destroy'
                  onClick={() => deleteTodo(todo)} />
        </div>
      );
    }

    return (
      <li className={classnames({
        completed: todo.complete,
        editing: this.state.editing
      })}>
        {element}
      </li>
    )
  }
}

我对如何编写一个测试有点困惑，例如，该测试将验证双击组件是否已成功将状态设置为editing: true。

通常，我将测试分为两部分，“渲染”和“事件”，即 TodoItem-test.js：

import React, { addons } from 'react/addons';
import _ from 'lodash';
import expect from 'expect';
const { TestUtils } = addons;

import TodoItem from '../TodoItem';

describe('TodoItem', () => {

  const mockedTodo = {
    text: 'abc123',
    complete: false
  };

describe('rendering', () => {
    let component;

    before(() => {
      component = TestUtils.renderIntoDocument(
        <TodoItem
          todo={mockedTodo}
          editTodo={_.noop}
          markTodoAsComplete={_.noop}
          deleteTodo={_.noop}
        />
      );
    });

    afterEach(() => {
      React.unmountComponentAtNode(React.findDOMNode(component));
    });

    it('should render the element', () => {
      const liComponent = TestUtils.findRenderedDOMComponentWithTag(component, 'li');

      expect(liComponent).toExist();
    });

    it('should render text in label', () => {
      const labelComponent = TestUtils.findRenderedDOMComponentWithTag(component, 'label');

      expect(labelComponent).toExist();
      expect(React.findDOMNode(labelComponent).textContent).toEqual('abc123');
    });
  });

 describe('events', () => {
  ...

});

但是在这种情况下，我想看看双击组件是否会导致以下情况：

1. 组件状态现在应该有一个与之关联的 editing 标志
2. element 应该已经改变，TodoItem.js 现在应该渲染一个<TodoInput/> 组件。

针对这种预期行为构建测试的最有效方法是什么？我在想我应该做两件事：

首先，测试双击组件是否添加了预期的"editing: true" 标志。 我不知道该怎么做。如果我按如下方式设置测试：

describe('events', () => {
    let component;
    let deleteTodoCallback = sinon.stub();

    beforeEach(() => {
      component = TestUtils.renderIntoDocument(
        <TodoItem
          todo={mockedTodo}
          editTodo={_.noop}
          markTodoAsComplete={_.noop}
          deleteTodo={deleteTodoCallback}
        />
      );
    });

    afterEach(() => {
      React.unmountComponentAtNode(React.findDOMNode(component));
    });

    it(`should change the editing state to be true if a user double-clicks
          on the todo`, () => {

        const liComponent = TestUtils.findRenderedDOMComponentWithTag(component, 'li');

        // expect the editing flag to be false

        TestUtils.Simulate.doubleClick(React.findDOMNode(liComponent));

        // expect the editing flag to be true

    });
  });

如何进行测试以确保已设置编辑标志？ liComponent.props.editing 返回 undefined.

其次，有一个context("if the component is editing mode") 进行测试以确保正确呈现以下内容：

  <li className={classnames({
    completed: todo.complete,
    editing: this.state.editing
  })}>
      <TodoInput text={todo.text}
                   editing={this.state.editing}
                   onSave={(text) => this.handleSave(todo.id, text)} />
  </li>

我也不确定如何进行严格的测试。

Answer 1

liComponent.props 未定义，因为 liComponent 是 DOM 元素，而不是 react 组件。之所以如此，是因为您使用findRenderedDOMComponentWithTag 获取它。您实际上已经可以访问您尝试测试的 React 组件。

it('should render the element', () => {
    const liComponent = TestUtils.findRenderedDOMComponentWithTag(component, 'li');

    // `component` is from your `before` function
    expect(component.state.editing).toBe(false);

    // Make sure you're simulating on a DOM element
    TestUtils.Simulate.doubleClick(liComponent);

    expect(component.state.editing).toBe(true);
});

然后您可以使用scryRenderedComponentsWithType 检查是否呈现了TodoInput。