Test React Formular Einreichen mit Jest & TestUtils

Question

Ich habe Probleme beim Testen eines Formulars submit Ereignis mit React, TestUtils und Jest.

Ich habe eine Komponente, die ein <form> DOM-Element rendert; Die gleiche Komponente verfügt auch über eine Methode, die das Ereignis onSubmit behandelt und eine Anweisung protokolliert. Mein Ziel ist es, den onSubmit Handler zu verspotten und zu behaupten, dass er aufgerufen wird.

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

Verwandte Fragen:

• Test a React Component function with Jest
• Test a form with Jest and React JS TestUtils

Answer 1

Was scheint genau das Problem zu sein?

React.addons.TestUtils.Simulate.submit() funktioniert für mich.

Wenn es helfen kann, war ich in einer ähnlichen Situation und ich die Prüfung der auf diese Weise einreichen Handler (mit sinon.js, mocha und 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('test@email.com'); 
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

Es gibt eine issue with the way React calls event handlers, die die ursprüngliche Handler-Funktion weiterhin bewirkt, selbst wenn du versuchst, es zuerst zu verspotten.

Dies kann offenbar durch die Umstellung auf die ES6 class syntax vermieden werden Komponentenklassen zu schaffen, aber eine andere einfache Abhilfe ist die Event-Handler nur noch eine zweite Funktion aufrufen und verspotten. Zum Beispiel:

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

würden Sie das onSubmit={this.onSubmit} und Mock handleSubmit statt onSubmit des Formulars festgelegt. Da dies eine scheinbar unnötige zusätzliche Funktion einführt, ist es wahrscheinlich wert, einen Kommentar hinzuzufügen, um spätere Versuche zu "reparieren", die den Test durchbrechen würden.