Question

我遇到了一些关于测试的问题，我尝试测试是否添加了正确的事件监听器。我已经阅读了相关文档和其他SO问题，但似乎无法弄清楚这一点。

在包含的代码中，我尝试以3种不同的方式触发click事件，但没有成功。我正在使用Karma作为karma-jasmine的规范运行器，在Chrome中进行重新设置和测试。

我的规格如下：

var React = require('react/addons');
var TestUtils = React.addons.TestUtils;
var $ = jQuery = require('jquery');

describe('FORM', function() {

  var FORM;

  describe('_addFormListeners(..)', function() {

    var _form;

    var dummy = jasmine.createSpy('dummy');
    var _form_dom_node;

    beforeEach(function(done){

      FORM = require('../FORM.react.js');

      _form = TestUtils.renderIntoDocument(
        <FORM />
      );

      _form._addFormListeners(dummy);

      done();

    });

    afterEach(function(){

      _form._removeFormListeners(dummy);

    });

    it('will add click event', function(done) {

      _form.refs.SubmitButton.getDOMNode().click();

      expect(dummy).toHaveBeenCalled();

      done();

    });

    it('will add click event', function(done) {

      _form_dom_node = TestUtils.findRenderedDOMComponentWithClass(_form,'submit-button');

      _form_dom_node.click();

      expect(dummy).toHaveBeenCalled();

      done();

    });

    it('will add click event', function(done) {

      _form_dom_node = $('.submit-button');

      _form_dom_node.click();

      expect(dummy).toHaveBeenCalled();

      done();

    });

  });

});

我的FORM组件看起来基本上是这样的：

var React = require('react');
var _     = require("underscore");
var $     = require("jquery");

module.exports = React.createClass({
  _addFormListeners : function(callback){

    $('[data-rel="submit"]')
      .on( 'click', callback);

    $('form[name="form"]')
      .on( 'submit', callback);

  },
  _removeFormListeners : function(callback){

    $('[data-rel="submit"]')
      .off( 'click', callback);

    $('form[name="form"]')
      .off( 'submit', callback);

  },
  render: function() {


    return (<div>
                    <button ref={'SubmitButton'} type="button" className="submit-button button inline-block primary left-margin" data-rel="submit">
                      Submit
                    </button>
                    </div>);
  }
});

如果我将按钮类型设置为“submit”，则会收到Some of your tests did a full page reload! - 错误，表示是，触发了click事件，但未添加侦听器。

我在这里做错了什么？

Answer 1

我提出了一个问题，React中的虚拟事件系统如何与jQuery或普通的浏览器事件不一致：https://github.com/facebook/react/issues/3249

在一天结束时，没有人真正关心。您应该保证可以使用的最佳解决方案是使用React Test Utils：http://facebook.github.io/react/docs/test-utils.html#simulate

像这样：

var node = React.findDOMNode(this.refs.input);
React.addons.TestUtils.Simulate.click(node);
React.addons.TestUtils.Simulate.change(node, {target: {value: 'Hello, world'}});
React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});

...您已经在TestUtils中引入了它，所以您应该相应地更改您的代码：

// won't work:
// _form.refs.SubmitButton.getDOMNode().click()

// will work:
TestUtils.Simulate.click(_form.refs.SubmitButton);

在没有jest的jasmine测试中使用React组件触发jQuery事件

1 个答案: