在我的类似教程的应用程序中,我有一个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 还是自动为我模拟?