Applying for a test reaction with Jest & TestUtils

Question

I'm having trouble testing submit form event using React, TestUtils and Jest.

I have a component that displays a <form> DOM element; the same component also has a method that processes the onSubmit event and writes an instruction. My goal is to mock the onSubmit handler and claim that it is being called.

form-component.cjsx

 module.exports = React.createClass # Handle form submissions handleSubmit: (e) -> console.log 'Make async call' # Render a form render: -> <form onSubmit={@handleSubmit}> <input type="submit" /> </form> 

__ tests __ / test-form-component.coffee

 jest .dontMock '../form-component' React = require 'react/addons' TestUtils = React.addons.TestUtils FormComponent = require '../form-component' describe 'FormComponent', -> it 'creates a log statement upon form submission', -> # Render a FormComponent into the dom formInstance = TestUtils.renderIntoDocument(<FormComponent />) # Mock the `handleSubmit` method formInstance.handleSubmit = jest.genMockFunction() # Simulate a `submit` event on the form TestUtils.Simulate.submit(formInstance) # TestUtils.Simulate.submit(formInstance.getDOMNode()) ??? # I would have expected the mocked function to have been called # What gives?! expect(formInstance.handleSubmit).toBeCalled() 

Matters Related:

• Test React Component Function with Jest
• Test the form with Jest and React JS TestUtils

Answer 1

What, actually, is the problem?

React.addons.TestUtils.Simulate.submit() works for me.

If this can help, I was in a similar situation and I am testing the submit handler this way (using sinon.js , mocha and chai ):

 var renderDocumentJQuery = $(renderDocument.getDOMNode()) this.xhr = sinon.useFakeXMLHttpRequest(); var requests = this.requests = []; this.xhr.onCreate = function (xhr) { requests.push(xhr); }; renderDocumentJQuery.find('input#person_email').val(' [e-mail] '); React.addons.TestUtils.Simulate.submit(renderDocumentJQuery.find('form')[0]); var requestFired = requests[0]; this.xhr.restore(); it('should fire an AJAX with the right params', function(){ assert.equal(requestFired.requestBody,'campaign_id=123&owner_id=456&person%5Bemail%5D=test%40email.com') }); it('should fire an AJAX with a POST method', function(){ assert.equal(requestFired.method,'POST') }); it('should fire an AJAX with the correct url', function(){ assert.equal(requestFired.url,'url-for-testing') }); 

Answer 2

There is a problem with how React calls event handlers , which causes the function of the original handler to continue to be called, even if you try to mock it first.

This, apparently, can be avoided by switching to the syntax of the ES6 class to create component classes, but another simple workaround is to have an event handler call the second function and scoff at it. For instance:

 onSubmit: function() { this.handleSubmit(); // extra fn needed for Jest }, handleSubmit: function(){ this.setState({ submitted: true }); } 

You should set the form onSubmit={this.onSubmit} and mock handleSubmit instead of onSubmit . Since this introduces a seemingly superfluous additional function, if you decide to do this, it may be worth adding a comment in order to anticipate subsequent attempts to “fix” which will violate the test.