Отправка формы теста с помощью Jest & TestUtils

Question

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

У меня есть компонент, который делает <form> Элемент DOM; тот же компонент также имеет метод, который обрабатывает 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()

Смежные вопросы:

• Протестируйте функцию React Component с помощью Jest
• Протестируйте форму с помощью Jest и React JS TestUtils

Answer 1

Существует проблема с тем, как React вызывает обработчики событий, из-за чего исходная функция-обработчик продолжает вызываться, даже если вы сначала попытаетесь ее смоделировать.

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

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

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

Answer 2

В чем именно заключается ваша проблема?

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