測試 React 表單組件

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;

團隊行動：

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 模擬應該沒有交互）

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 操作的方法。