作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我有以下 React 组件:
export default class SignUpForm extends React.Component {
...
doSignupForm(event) {
// Some API call...
}
render() {
return (
<div>
<form action="/" onSubmit={this.doSignupForm.bind(this)} id="register-form">
<button type="submit" id="register_button">Sign Up</button>
</form>
</div>
);
}
};
我想测试按钮是否触发 doSignupForm
函数 - 我该怎么做(最好使用 Mocha/Chai/Enzyme/Sinon)?
此外,如您所见,doSignupForm
函数触发 API 调用 - 是否应使用集成测试单独测试此 API 调用(?)。
最佳答案
您可以使用 React Utils 模拟表单提交:
var rendered = TestUtils.renderIntoDocument(SignupForm);
var form = TestUtils.findRenderedDOMComponentWithTag(rendered, 'form');
TestUtils.Simulate.submit(form);
此外,测试对实际 API 的调用是不可靠的,您应该使用您期望的响应来模拟 API 调用,一个想法是将 API 调用提取到它自己的模块中,并设置一个 spy 来测试具有特定响应的组件的行为(例如 Jasmine 的 spy ):
spyOn(apiModule, "requestProjects").and.callFake(function() {
return { ...someProjects };
});
引用:
https://facebook.github.io/react/docs/test-utils.html https://volaresystems.com/blog/post/2014/12/10/Mocking-calls-with-Jasmine
关于javascript - 如何在 React 中测试表单提交?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42638384/
我是一名优秀的程序员,十分优秀!