Question

在我类似教程的应用程序中，我有一个 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;

TeamActions：

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模拟进行适当的调用

3）如果提交一份有效名称和评级的表格，则应清理名称和评级输入。

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

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

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

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

是jest指示模拟所有这些依赖项（react，react-bootstrap，team_actions）还是我应该以某种方式模拟TeamActions？

//编辑：

因为有人说我在一个主题中提出了太多的问题，更具体一点：

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

Answer 1

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的行为。

react.js - 测试表单组件

1 个答案: