title: React TestUtils, how can I simulate document mouseMove?
body: <p>I want to use <code>TestUtils.Simulate.mouseMove</code> on the <code>document</code>. I have a component <code>Dragger</code> that adds a <code>mouseMove</code> event listener to the <code>document</code>. Here is an incomplete version:</p>
  
  <pre class="lang-js prettyprint-override"><code>// Dragger.js
  'use strict';
  
  var React = require('react');
  
  export default React.createClass({
      propTypes: {
          handleDrag: React.PropTypes.func // callback set by parent
      },
      getInitialState: function() {
          return {dragging: false}
      },
      componentDidUpdate: function(props, state) {
          // 
          if (this.state.dragging &amp;&amp; !state.dragging) {
              document.addEventListener('mousemove', this.onMouseMove)
          } else if (!this.state.dragging &amp;&amp; state.dragging) {
              document.removeEventListener('mousemove', this.onMouseMove)
          }
      },
      onMouseDown: function(e) {
          this.setState({dragging: true})
      },
      onMouseMove: function(e) {
          // Calls back to the parent with the drag
          this.props.handleDrag(e);
      },
      render: function() {
          return &lt;div onMouseDown={this.onMouseDown} &gt;&lt;/div&gt;
      }
  });
  </code></pre>
  
  <p>I'm using <a href="http://jasmine.github.io/" rel="nofollow">jasmine</a>, and I want to make sure my <code>handleDrag</code> callback is called after a <code>mouseDown</code> followed by a <code>mouseMove</code>.</p>
  
  <pre class="lang-js prettyprint-override"><code>// Dragger.spec.js
  
  var React = require('react/addons');
  import Dragger from './Dragger';
  
  var TestUtils = React.addons.TestUtils;
  
  describe('Dragger', function() {
      it('should call the callback after drag interaction', function() {
          // make callback to spy on
          var f = {callback: function(e){return}};
  
          // render Dragger
          var dragger = TestUtils.renderIntoDocument(&lt;Dragger handleDrag={f.callback} /&gt;);
  
          // spy on callback
          spyOn(f, 'callback');
  
          // simulate a mouseDown and mouseMove
          TestUtils.Simulate.mouseDown(dragger.getDOMNode(), {button: 0});
          TestUtils.Simulate.mouseMove(document);
  
          expect(f.callback).toHaveBeenCalled(); // FAILS!
      }
  }
  </code></pre>
  
  <p>But the <code>mouseMove</code> event is not being properly simulated. I see 2 problems</p>
  
  <ol>
  <li>I might need to pass event data to <code>TestUtils.Simulate.mouseMove</code>. For example, the call <code>TestUtils.Simulate.mouseDown(dragger.getDOMNode())</code> did <strong>not</strong> work until I changed it to <code>TestUtils.Simulate.mouseDown(dragger.getDOMNode(), {button: 0})</code>. What event data should I pass to <code>TestUtils.Simulate.mouseMove</code>?</li>
  <li>The <code>document</code> is not part of the <a href="https://facebook.github.io/react/docs/test-utils.html#renderintodocument" rel="nofollow">detached DOM</a> that the test component is rendered into. This could be another reason the <code>Simulate.mouseMove</code> doesn't work. What can I use in the test instead of <code>document</code>?</li>
  </ol>
  
  <p>How can I use <code>TestUtils.Simulate.mouseMove</code>?</p>