reactjs - React TestUtils，如何模拟文档mouseMove？

Question

我想在文档上使用TestUtils.Simulate.mouseMove。我有一个组件 Dragger，它向 document 添加一个 mouseMove 事件监听器。这是一个不完整的版本:

// 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 ，并且我想确保在 mouseDown 后调用 mouseMove 之后调用我的 handleDrag 回调。

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

但是 mouseMove 事件没有被正确模拟。我发现两个问题

1. 我可能需要将事件数据传递给 TestUtils.Simulate.mouseMove。例如，调用 TestUtils.Simulate.mouseDown(dragger.getDOMNode()) 确实不起作用，直到我将其更改为 TestUtils.Simulate.mouseDown(dragger. getDOMNode(), {按钮: 0})。我应该将哪些事件数据传递给 TestUtils.Simulate.mouseMove？
2. 文档不是 detached DOM 的一部分测试组件被渲染到。这可能是 Simulate.mouseMove 不起作用的另一个原因。我可以在测试中使用什么来代替文档？

如何使用TestUtils.Simulate.mouseMove？

Answer 1

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

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
});

基本上，您可以使用 window.document.documentElement 查找 document.documentElement 并像任何其他元素一样从中分派(dispatch)事件