React - how to test form submit?

问题:

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

回答1:

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

回答2:

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

回答3:

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

文章来源: React - how to test form submit?