Подача заявки на тестовое оформление с помощью Jest & TestUtils

Question

У меня возникла проблема с тестированием формы submit с использованием React, TestUtils и Jest.

У меня есть компонент, который отображает элемент DOM <form>; тот же компонент также имеет метод, который обрабатывает событие onSubmit и регистрирует инструкцию. Моя цель - высмеять обработчик onSubmit и утверждать, что он вызывается.

форм-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() 

Вопросы, относящиеся:

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

Answer 1

Какая у вас проблема?

React.addons.TestUtils.Simulate.submit() работает для меня.

Если это может помочь, я был в подобной ситуации, и я тестирование отправки обработчика таким образом (с помощью sinon.js, mocha и 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

Там в issue with the way React calls event handlers, который вызывает исходную функцию обработчика продолжать называться, даже если вы сначала попытаетесь издеваться над ним.

Этого, по-видимому, можно избежать, переключившись на ES6 class syntax, чтобы создать классы компонентов, но еще одним простым способом является обращение обработчика событий к вызову второй функции и издеваться над этим. Например:

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

Вы бы установить форму-х onSubmit={this.onSubmit} и издеваться handleSubmit вместо onSubmit. Поскольку это вводит, казалось бы, лишнюю дополнительную функцию, если вы решите сделать это, вероятно, стоит добавить комментарий, чтобы предвидеть последующие попытки «исправить», что нарушит тест.