6

在我的类似教程的应用程序中，我有一个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 mock 上不应该有交互）

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

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

我该如何测试它？我是否应该使用 react 的 TestUtils 以某种方式访问​​ DOM？

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

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

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

是开玩笑指示模拟所有这些依赖项（react、react-bootstrap、team_actions）还是我应该以某种方式自己模拟 TeamActions？

// 编辑：

因为有人说我在一个话题上问了太多问题，具体来说：

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

4

1 回答 1

5

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 动作。

于 2015-02-22T17:03:09.183 回答