React TestUtils，如何模拟文档mouseMove？

我想用TestUtils.Simulate.mouseMove on the document。我有一个组件Dragger这增加了一个mouseMove事件侦听器document。这是一个不完整的版本：

// 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 && !state.dragging) {
            document.addEventListener('mousemove', this.onMouseMove)
        } else if (!this.state.dragging && 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 <div onMouseDown={this.onMouseDown} ></div>
    }
});

我在用着jasmine http://jasmine.github.io/，我想确保我的handleDrag回调被调用后mouseDown随后是一个mouseMove.

// 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(<Dragger handleDrag={f.callback} />);

        // 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!
    }
}

But the mouseMove事件没有被正确模拟。我看到 2 个问题

1. 我可能需要将事件数据传递给TestUtils.Simulate.mouseMove。例如，调用TestUtils.Simulate.mouseDown(dragger.getDOMNode()) did not工作直到我将其更改为TestUtils.Simulate.mouseDown(dragger.getDOMNode(), {button: 0})。我应该传递什么事件数据TestUtils.Simulate.mouseMove?
2. The document不属于分离的 DOM https://facebook.github.io/react/docs/test-utils.html#renderintodocument测试组件被渲染到。这可能是另一个原因Simulate.mouseMove不起作用。我可以在测试中使用什么来代替document?

我该如何使用TestUtils.Simulate.mouseMove?

经过几个小时使用酶和 React 的 TestUtils 尝试各种方法后，我终于发现仅在纯 JS 中创建和分派事件，这在我的玩笑测试中有效

it('calls handler on mouseDown on element, mouseMove on document', () => {
  const handler = jest.fn();
  const props = {
    foo: {
      uid: '1',
      resizable: true,
    },
    resizeHandler,
  };

  const instance = mount(<Header {...props} />);
  const resizer = instance.find('.resizer');
  const top = window.document.documentElement;  // target the documentElement
  resizer.simulate('mouseDown', { preventDefault: () => true });   // uses enzyme to simulate this event, adding listener to documentElement on mousemove
  const mouseMove = new Event('mousemove');  // creates a new event
  top.dispatchEvent(mouseMove);              // dispatches it
  const mouseUp = new Event('mouseup');
  top.dispatchEvent(mouseUp);
  expect(resizeHandler).toBeCalled();        // the passed in handler is called on mousemove
});

基本上你可以找到document.documentElement with window.document.documentElement并像其他任何事件一样从中分派事件element