测试 React 表单组件

Testing React form components

在我的类似教程的应用程序中,我有一个 AddForm 组件:

var React = require('react');
var Input = require('react-bootstrap').Input;
var TeamActions = require('../actions/team_actions.js');

var AddForm = React.createClass({
  handleFormSubmit: function(e) {
    e.preventDefault();

    var name = this._trimmedValue(this.refs.name);
    var rating = this._trimmedValue(this.refs.rating);

    if (name && rating) {
      TeamActions.addTeam(
        {name: name, rating: rating}
      );
      this._clearField(this.refs.name);
      this._clearField(this.refs.rating);
    }
  },

  _trimmedValue: function(field) {
    return field.getInputDOMNode().value.trim();
  },

  _clearField: function(field) {
    field.getInputDOMNode().value = '';
  },

  render: function() {
    return (
        <form onSubmit={this.handleFormSubmit}>
          <Input label="Name" type="text" placeholder="Name" ref="name" />
          <Input label="Rating" type="text" placeholder="Rating" ref="rating" />
          <Input bsStyle="primary" type="submit" value="Add!" />
        </form>
    );
  }
})

module.exports = AddForm;

团队行动:

var McFly = require('mcfly');
var Flux = new McFly();
var TeamConstants = require('../constants/team_constants.js');


var TeamActions = Flux.createActions({
  addTeam: function(team) {
    return {
      actionType: TeamConstants.ADD_TEAM,
      team: team
    }
  }
});

module.exports = TeamActions;

如您所见,我在这里使用的是 McFly 和 React-Bootstrap。

现在我想测试一下,使用 jest。

我想要以下测试用例:

1) 如果有人试图提交一个输入为空的表单,则不会发生任何事情(更具体地说 - TeamActions 模拟上不应有交互)

2) 如果提交的表单具有有效的名称和评级,则应该正确调用 TeamActions mock

3) 如果提交的表单具有有效的姓名和评级,则应清除姓名和评级输入。

如何测试?我应该使用 React 的 TestUtils 以某种方式访问​​ DOM 吗?

我应该以某种方式模拟表单提交吗?如果是这样,我该怎么做?

最后一件事 - 我的 AddForm 依赖于 TeamActions。通过写作:

jest.dontMock('../add_form.js');

是开玩笑地指示模拟所有这些依赖项(反应、反应-bootstrap、team_actions)还是我应该以某种方式自己模拟 TeamActions?

// 编辑:

因为有人说我在一个话题上问了太多问题,具体点:

如何使用 TestUtils 模拟具有特定负载的表单提交? 我需要自己模拟 TeamActions 还是自动为我模拟?

React TestUtils 允许您模拟表单提交:

var addForm = TestUtils.renderIntoDocument(AddForm(null));
var form = TestUtils.findRenderedDOMComponentWithTag(addForm, 'form');
TestUtils.Simulate.submit(form);

我测试操作的方法是手动模拟 addTeam。在测试中模拟任何内容之前,请执行以下操作:

var TeamActions = require('../actions/team_actions');
TeamActions.addTeam = jest.genMockFn();
/* then simulate submission... */
expect(TeamActions.addTeam).toBeCalledWith({name: 'name', rating: 'rating'});

为了测试输入值,只需使用 refs。

addForm.refs.name.getDOMNode().value = 'Some Name';
/* perform some action that should clear input */
expect(addForm.refs.name.getDOMNode().value).toEqual('');

编辑

要回答您编辑过的问题,看起来您实际上不需要手动模拟 addTeam;我刚刚试了一下,Jest 似乎想出了如何模拟 McFly 动作。