title: Trigger jQuery events with React component in jasmine tests without jest
body: <p>I'm having some issues regarding a test where I try to test if the correct event listeners are added. I've read up on the relevant documentation and other SO questions, but can't seem to figure this one out. </p>
  
  <p>In the included code, I've tried to trigger the <code>click</code> event in 3 different ways, with no success. I'm using Karma as a spec runner with karma-jasmine, browserify with reactify and testing in Chrome.</p>
  
  <p>My spec loooks like this:</p>
  
  <pre><code>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(
          &lt;FORM /&gt;
        );
  
        _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();
  
      });
  
    });
  
  });
  </code></pre>
  
  <p>And my FORM-component look basically like this:</p>
  
  <pre><code>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 (&lt;div&gt;
                      &lt;button ref={'SubmitButton'} type="button" className="submit-button button inline-block primary left-margin" data-rel="submit"&gt;
                        Submit
                      &lt;/button&gt;
                      &lt;/div&gt;);
    }
  });
  </code></pre>
  
  <p>If I set the button type to "submit", I get the <code>Some of your tests did a full page reload!</code>-error, indicating that, yes, the click event is fired, but the listener is not added.</p>
  
  <p>What am I doing wrong here? </p>