6

submitReact、TestUtils、および Jest を使用してフォーム イベントをテストできません。

<form>DOM 要素をレンダリングするコンポーネントがあります。同じコンポーネントには、onSubmitイベントを処理してステートメントをログに記録するメソッドもあります。onSubmit私の目標は、ハンドラーをモックし、それが呼び出されたことをアサートすることです。

フォームコンポーネント.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()

関連する質問:

4

2 に答える 2

0

あなたの問題は正確には何ですか？

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')
});
于 2015-03-06T22:39:10.360 に答える
0

React がイベント ハンドラーを呼び出す方法に問題があり、最初にモックしようとしても、元のハンドラー関数が引き続き呼び出されます。

これは明らかに、 ES6 クラス構文に切り替えてコンポーネント クラスを作成することで回避できますが、もう 1 つの簡単な回避策は、イベント ハンドラーで 2 番目の関数を呼び出してそれをモックすることです。例えば：

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

の代わりにフォームonSubmit={this.onSubmit}とモックを設定します。これは一見不必要な余分な機能を導入するため、これを行うことにした場合は、後でテストを中断する「修正」を試みることを予測するためにコメントを追加する価値があります。handleSubmitonSubmit

于 2015-03-14T12:16:44.040 に答える