Question

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

monitor.isDragging()

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

Answer 1

从你的问题来看，目前还不清楚你是否能够在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();

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

要从Source或Target组件的测试外部检查它，那么组件测试中应该需要的就是：

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;

是React dnd拖动状态可从外部拖动的项目访问

1 个答案: