测试 React 表单组件
Testing React form components
在我的类似教程的应用程序中,我有一个 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 模拟上不应有交互)
2) 如果提交的表单具有有效的名称和评级,则应该正确调用 TeamActions mock
3) 如果提交的表单具有有效的姓名和评级,则应清除姓名和评级输入。
如何测试?我应该使用 React 的 TestUtils 以某种方式访问 DOM 吗?
我应该以某种方式模拟表单提交吗?如果是这样,我该怎么做?
最后一件事 - 我的 AddForm 依赖于 TeamActions。通过写作:
jest.dontMock('../add_form.js');
是开玩笑地指示模拟所有这些依赖项(反应、反应-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 动作。
在我的类似教程的应用程序中,我有一个 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 模拟上不应有交互)
2) 如果提交的表单具有有效的名称和评级,则应该正确调用 TeamActions mock
3) 如果提交的表单具有有效的姓名和评级,则应清除姓名和评级输入。
如何测试?我应该使用 React 的 TestUtils 以某种方式访问 DOM 吗?
我应该以某种方式模拟表单提交吗?如果是这样,我该怎么做?
最后一件事 - 我的 AddForm 依赖于 TeamActions。通过写作:
jest.dontMock('../add_form.js');
是开玩笑地指示模拟所有这些依赖项(反应、反应-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 动作。