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

IT技术 javascript unit-testing reactjs
2021-05-24 08:31:04

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

3个回答

你可以使用 React Utils 模拟表单提交：

var rendered = TestUtils.renderIntoDocument(SignupForm);
var form = TestUtils.findRenderedDOMComponentWithTag(rendered, 'form');
TestUtils.Simulate.submit(form);

此外，测试对实际 API 的调用是不可靠的，你应该用你期望的响应来模拟 API 调用，一个想法是将 API 调用提取到它自己的module中，并设置一个间谍来测试你的行为具有特定响应的组件（例如 Jasmine 间谍）：

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

由于您正在使用Enzyme和Sinon 

import sinon from 'sinon';
import {mount} from 'enzyme';
import expect from 'expect';

it('fires form submit', () => {
   const doSignupForm = sinon.stub(SignUpForm.prototype, 'doSignupForm').returns(true);

    const wrapper = mount(<SignUpForm />);
    wrapper.find('button').simulate('click');
    expect(doSignupForm.called).to.be.true;
    doSignupForm.restore();



});

如前所述这里，事件冒泡不支持的酶。因此，找到了以下解决方法：

import sinon from 'sinon';
import {mount} from 'enzyme';
import chai from 'chai';
var expect = chai.expect;

it('fires form submit', () => {
   const doSignupForm = sinon.stub(SignUpForm.prototype, 'doSignupForm').returns(true);

    const wrapper = mount(<SignUpForm />);
    wrapper.find('#register_button').get(0).click();
    expect(doSignupForm).to.have.been.called;
    doSignupForm.restore();

});
其它你可能感兴趣的问题
上一篇改变 <body> 元素的样式 下一篇帮助诊断 Z 带