0

我正在使用 React Dnd（带有鼠标后端）来拖动项目，它的工作原理就像一个魅力。但是，我可能有一个我希望能够测试的用例：

monitor.isDragging()

从 Source 和 Target 组件外部，了解当前是否存在拖动操作。

4

1 回答 1

0

从您的问题来看，您目前是否能够从 DragSource/DropTarget 中测试 monitor.isDragging() 尚不清楚，所以我将假设您不知道该怎么做。

首先，包装在 DragSource/DropTarget 中的任何组件都不能在拖放上下文之外呈现，因此您必须确保在假拖放上下文中呈现组件（部分代码从https 复制过来： //react-dnd.github.io/react-dnd/docs-testing.html )

import React, { Component } from 'react';
import TestBackend from 'react-dnd-test-backend';
import { DragDropContext } from 'react-dnd';
import { mount } from 'enzyme';

/**
 * Wraps a component into a DragDropContext that uses the TestBackend.
 */
function wrapInTestContext(DecoratedComponent) {
  return DragDropContext(TestBackend)(
    class TestContextContainer extends Component {
      render() {
        return <DecoratedComponent {...this.props} />;
      }
    }
  );
}

it('can be tested with the testing backend', () => {
  const WrappedComponent = wrapInTestContext(MyComponent);

  const RenderedComponent = mount(<WrappedComponent />);
});

一旦你像这样渲染了你的组件，你现在可以像这样访问监视器（getMonitor() 函数不在文档中，但它在那里并且像你期望的那样工作）：

const manager = RenderedComponent.get(0).getManager();

const monitor = manager.getMonitor();

因此，您现在可以使用 isDragging 访问monitor.isDragging()（注意：如果您的用例涉及将 isDragging 设置为 true，然后稍后检查是否呈现类或其他内容，您也可以存根这些监视器函数）。

要从源或目标组件的测试外部检查它，那么在该组件测试内部应该需要的所有内容都类似于：

const WrappedDragComponent = wrapInTestContext(MyDragComponent);
const page = mount(<WrappedDragComponent />);
const manager = page.get(0).getManager();
const backend = manager.getBackend();
const monitor = manager.getMonitor();
        
const dragSourceId = page.find(MyDragComponent).get(0).getHandlerId();

backend.simulateBeginDrag([dragSourceId]);
        
expect(monitor.isDragging()).to.be.true;

于 2017-05-15T00:03:37.723 回答