React TestUtils，我如何模拟文档mouseMove?

问题描述

我想在document上使用TestUtils.Simulate.mouseMove.我有一个组件Dragger，该组件将mouseMove事件侦听器添加到document.这是一个不完整的版本:

I want to use TestUtils.Simulate.mouseMove on the document. I have a component Dragger that adds a mouseMove event listener to the document. Here is an incomplete version:

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

我正在使用茉莉花，并且我想确保在之后调用handleDrag回调mouseDown后跟mouseMove.

I'm using jasmine, and I want to make sure my handleDrag callback is called after a mouseDown followed by a 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!
    }
}

但是mouseMove事件没有被正确模拟.我看到两个问题

But the mouseMove event is not being properly simulated. I see 2 problems

1. 我可能需要将事件数据传递给TestUtils.Simulate.mouseMove.例如，在我将其更改为TestUtils.Simulate.mouseDown(dragger.getDOMNode(), {button: 0})之前，呼叫TestUtils.Simulate.mouseDown(dragger.getDOMNode())不能成功执行 .我应该将哪些事件数据传递给TestUtils.Simulate.mouseMove?
2. document不是分离的DOM的一部分将测试组件渲染到其中.这可能是Simulate.mouseMove无法正常工作的另一个原因.我可以在测试中代替document使用什么?

1. I might need to pass event data to TestUtils.Simulate.mouseMove. For example, the call TestUtils.Simulate.mouseDown(dragger.getDOMNode()) did not work until I changed it to TestUtils.Simulate.mouseDown(dragger.getDOMNode(), {button: 0}). What event data should I pass to TestUtils.Simulate.mouseMove?
2. The document is not part of the detached DOM that the test component is rendered into. This could be another reason the Simulate.mouseMove doesn't work. What can I use in the test instead of document?

如何使用TestUtils.Simulate.mouseMove?

推荐答案

在用酶和React的TestUtils尝试了多种方法后，我终于想到了在纯JS中创建和分发事件的方法，该方法在我的开玩笑的测试中像这样

After hours of trying various methods with enzyme and react's TestUtils I finally came upon just creating and dispatching events in pure JS, which works in my jest tests like this

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并像其他任何element

Basically, you can find document.documentElement with window.document.documentElement and dispatch events from it like any other element

这篇关于React TestUtils，我如何模拟文档mouseMove?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！