javascript - 如何在 React 中测试表单提交？

Question

我有以下 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 调用(？)。

Answer 1

您可以使用 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