React TestUtils，如何模拟文档mouseMove？

Question

我想在document 上使用TestUtils.Simulate.mouseMove。我有一个组件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，并且我想确保在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 事件没有被正确模拟。我看到了 2 个问题

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

如何使用TestUtils.Simulate.mouseMove？

Answer 1

这是一篇旧帖子，但我发现还没有发布的解决方案，我遇到了它，因为我正在编写一个类似的组件。我认为问题在于您关注的是错误的事件，您应该使用onDrag 进行拖动检测，这是适用于我的代码的改编版本：

// Dragger.js

import React from 'react';

export default React.createClass({
    propTypes: {
        handleDrag: React.PropTypes.func // callback set by parent
    },
    getInitialState: function() {
        return {dragging: false}
    },
    onDragStart: function(e) {
        // Calls back to the parent with the drag
        this.setState({ dragging: true });
        this.props.handleDrag(e);
    },
    onDragEnd: function() {
        this.setState({ dragging: false });
    },
    render: function() {
        return <div onDragStart={this.onDragStart} onDragEnd={this.onDragEnd}></div>;
    }
});

和

// Dragger.spec.js

import React from 'react';
import Dragger from '../src/Dragger';
import {
    renderIntoDocument,
    scryRenderedDOMComponentsWithTag,
    Simulate
} from 'react-addons-test-utils';

import { expect } from 'chai';

describe('Dragger', function() {
    it('should call the callback after drag interaction', function() {
        // spy on callback
        var called = false;
        // make callback to spy on
        function callback() {
            called = true;
        };

        // render Dragger
        var dragger = renderIntoDocument(<Dragger handleDrag={callback} />);

        // simulate a dragStart and dragEnd
        const element = scryRenderedDOMComponentsWithTag(dragger, 'div')[0];
        Simulate.dragStart(element);
        Simulate.dragEnd(element);
        expect(called).to.equal(true);
    });
});

Answer 2

在用酶和反应的 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 和window.document.documentElement，并像其他任何element 一样从中调度事件