Reactjs React TestUtils，如何模拟文档mouseMove？

我想在

文档上使用
TestUtils.Simulate.mouseMove
。我有一个组件
Dragger
，它将
mouseMove
事件侦听器添加到
文档中。以下是一个不完整的版本：

//Dragger.js
"严格使用",；
var React=要求（'React'）；
导出默认的React.createClass({
道具类型：{
handleDrag:React.PropTypes.func//由父级设置的回调
},
getInitialState:函数（）{
返回{拖动：false}
},
componentDidUpdate：函数（道具、状态）{
// 
if（this.state.draging&&！state.draging）{
document.addEventListener（'mousemove'，this.onMouseMove）
}else if（！this.state.draging&&state.draging）{
document.removeEventListener（'mousemove'，this.onMouseMove）
}
},
onMouseDown：函数（e）{
this.setState（{drawing:true}）
},
onMouseMove：函数（e）{
//通过拖动调用回父级
这个.道具.把手（e）；
},
render:function（）{
返回
}
});

我正在使用，我想确保在
mouseDown
之后再调用
mouseMove
调用我的
handleDrag
回调

//Dragger.spec.js
var React=require（'React/addons'）；
从“/Dragger”导入Dragger；
var TestUtils=React.addons.TestUtils；
描述（'Dragger'，function（））{
它（'应该在拖动交互后调用回调'，函数（）{
//打电话监视
var f={callback:function（e）{return}}；
//渲染拖动器
var dragger=TestUtils.renderIntoDocument（）；
//监视回调
spyOn（f，“回调”）；
//模拟mouseDown和mouseMove
TestUtils.Simulate.mouseDown（dragger.getDOMNode（），{button:0}）；
TestUtils.Simulate.mouseMove（文档）；
expect（f.callback）.toHaveBeenCalled（）；//失败！
}
}

但是没有正确模拟
mouseMove
事件

我可能需要将事件数据传递给
TestUtils.Simulate.mouseMove
。例如，调用
TestUtils.Simulate.mouseDown（dragger.getDOMNode（））
在我将其更改为
TestUtils.Simulate.mouseDown（dragger.getDOMNode（），{button:0}之前，它不起作用
。我应该将哪些事件数据传递给
TestUtils.Simulate.mouseMove
文档
不是测试组件呈现到的文档的一部分。这可能是
模拟.mouseMove
不起作用的另一个原因。我可以在测试中使用什么来代替
文档
如何使用
TestUtils.Simulate.mouseMove
？
这是一篇老文章，但我发现还没有发布解决方案，我遇到了它，因为我正在编写一个类似的组件。我认为问题在于，你关注的是错误的事件，你应该使用
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.js
从“React”导入React；
导出默认的React.createClass({
道具类型：{
handleDrag:React.PropTypes.func//由父级设置的回调
},
getInitialState:函数（）{
返回{拖动：false}
},
onDragStart：功能（e）{
//通过拖动调用回父级
this.setState（{drawing:true}）；
这个.道具.把手（e）；
},
onDragEnd:function（）{
this.setState（{drawing:false}）；
},
render:function（）{
返回；
}
});

及

//Dragger.spec.js
从“React”导入React；
从“../src/Dragger”导入Dragger；
进口{
渲染文档，
SCryRenderdDomComponentSwithTag，
模拟
}来自“react插件测试utils”；
从“chai”导入{expect}；
描述（'Dragger'，function（））{
它（'应该在拖动交互后调用回调'，函数（）{
//监视回调
var=false；
//打电话监视
函数回调（）{
调用=真；
};
//渲染拖动器
var dragger=renderIntoDocument（）；
//模拟dragStart和dragEnd
常量元素=ScryRenderDomComponentSwithTag（dragger，'div'）[0]；
Simulate.dragStart（元素）；
模拟.绘图（元素）；
期望（调用）.to.equal（真）；
});
});
在用Ezyme和react的TestUtils尝试了几个小时后，我终于在纯JS中创建和调度事件，这在我的jest测试中是这样的

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

it（'在元素的mouseDown上调用处理程序，在文档的mouseMove上调用处理程序'，（）=>{
const handler=jest.fn（）；
常量道具={
傅：{
uid:'1'，
可调整大小：正确，
},
resizeHandler，
};
const instance=mount（）；
const resizer=instance.find（'.resizer'）；
const top=window.document.documentElement；//以documentElement为目标
resizer.simulate（'mouseDown'，{preventDefault:（）=>true}）；//使用酶模拟此事件，将侦听器添加到mousemove上的documentElement
const mouseMove=new Event（'mouseMove'）；//创建一个新事件
top.dispatchEvent（mouseMove）；//调度它
const mouseUp=新事件（“mouseUp”）；
top.dispatchEvent（鼠标悬停）；
expect（resizeHandler）.toBeCalled（）；//在mousemove上调用传入的处理程序
});

基本上，您可以使用
窗口.document.documentElement
找到
document.documentElement
，并像任何其他
元素一样从中分派事件，以解决您的问题。2：您是对的，传入文档肯定无法工作，因为TestUtils将您的组件呈现到分离的DOM节点中。我看到了这一点不过，您使用的是Jasmine，所以您可能想看看这个：它提供了
jasmineReact.render
，它实际上呈现了c
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
});