如何在测试 react-dnd 时对监视器进行存根？答案

【问题标题】：How do I stub the monitor while testing react-dnd?如何在测试 react-dnd 时对监视器进行存根？
【发布时间】：2016-07-07 19:49:32
【问题描述】：

我正在尝试测试我的 react-dnd 实现，在我的一个 drop 函数中，我使用 monitor.getInitialClientOffset() 函数来获取偏移量，我想存根这个方法以返回一个特定的我可以断言的偏移量，但我无法弄清楚。在我的测试中我正在使用

const WrappedContext = wrapInTestContext(ContextArea);
const page = mount(<WrappedContext />);
const manager = page.get(0).getManager();
const backend = manager.getBackend();

// Couple finds to get the right source and target ids

backend.simulateBeginDrag([sourceId])
backend.simulateHover([targetId])
backend.simulateDrop();
backend.simulateEndDrag();

（这是使用来自https://gaearon.github.io/react-dnd/docs-testing.html 的标准 wrapInTestContext）

drop 函数是从测试后端传递给一个监视器的，我在文档中没有看到将它的存根版本传递给任何模拟方法的方法。

【问题讨论】：

标签： testing reactjs react-dnd

【解决方案1】：

事实证明，您可以访问测试后端正在使用的监视器，然后像这样将其上的方法存根：

  const manager = page.get(0).getManager();
  const backend = manager.getBackend();
  const monitor = manager.getMonitor();

  sinon.stub(monitor, 'getInitialClientOffset', () => {
    return {
      x: 10,
      y: 20,
    };
  });

  sinon.stub(monitor, 'getDifferenceFromInitialOffset', () => {
    return {
      x: 2,
      y: 4,
    };
  });

然后在 drop 函数中，这些值将用于您正在使用的任何类型的数学中。

【讨论】：