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 回答