시험 반응 양식 제출 Jest & TestUtils로

Question

React, TestUtils 및 Jest를 사용하여 양식 submit 이벤트를 테스트하는 데 문제가 있습니다.

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. 이것은 겉으로보기에는 불필요한 추가 기능을 도입했기 때문에이를 수행하기로 결정했다면 나중에 테스트를 중단하는 "수정"시도를 예상하는 주석을 추가 할 가치가 있습니다.