测试React表单组件

Testing React form components

本文关键字：组件 表单 React 测试      更新时间：2024-03-20

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

现在我想用笑话来测试它。

我想要以下测试用例：

1） 如果有人试图提交一个输入为空的表单，则不应该发生任何事情（更具体地说，TeamActions mock上不应该有交互）

2） 如果一个人提交了一个具有有效名称和评级的表单，那么应该有一个适当的调用TeamActions模拟

3） 如果提交了一个具有有效名称和评级的表单，那么名称和评级输入应该被清除。

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

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

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

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

jest被指示嘲笑所有这些依赖关系（react、react 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的行为。

相关文章：