javascript - How can I test form submit in React? - Stack Overflow

admin管理员组

文章数量:1292954

I have the following React ponent:

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>
        );
    }
};

I want to test that the button fires the doSignupForm function - how do I do this (ideally using Mocha/Chai/Enzyme/Sinon)?

In addition, as you can see the doSignupForm function fires an API call - should this API call be tested seperately using an integration test (?).

I have the following React ponent:

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>
        );
    }
};

I want to test that the button fires the doSignupForm function - how do I do this (ideally using Mocha/Chai/Enzyme/Sinon)?

In addition, as you can see the doSignupForm function fires an API call - should this API call be tested seperately using an integration test (?).

• javascript
• unit-testing
• reactjs

Share Improve this question Follow edited Jul 30, 2020 at 19:47 isherwood 61.1k1616 gold badges120120 silver badges169169 bronze badges asked Mar 7, 2017 at 1:03 JoeTideeJoeTidee 26.1k2929 gold badges113113 silver badges163163 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You can simulate form submission using React Utils:

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

Also, testing calls to the actual API is not reliable, you should mock the API call with responses you expect from it, an idea would be to extract the API call in to its own module, and setup an spy to test the behaviour of your ponent with an specific response (example spy with Jasmine):

spyOn(apiModule, "requestProjects").and.callFake(function() {
    return { ...someProjects };
});

Reference:

https://facebook.github.io/react/docs/test-utils.html https://volaresystems./blog/post/2014/12/10/Mocking-calls-with-Jasmine

Since your are using Enzyme and 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();



});

As stated here, event bubbling is not supported in Enzyme. Therefore, found the following workaround:

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();

});

本文标签： javascriptHow can I test form submit in ReactStack Overflow