CODEWITHSUNDEEP
javascriptunit-testingreactjs
JoeTidee
JoeTidee

Reputation: 26044

How can I test form submit in React?

I have the following React component:

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 (?).

Upvotes: 5

Views: 11621

Answers (3)

JoeTidee
JoeTidee

Reputation: 26044

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

});

Upvotes: 0

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93183

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



});

Upvotes: 0

Carlos Martinez
Carlos Martinez

Reputation: 4510

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 component 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.com/blog/post/2014/12/10/Mocking-calls-with-Jasmine

Upvotes: 5

Related Questions