React dnd перетаскивает состояние, доступное извне перетаскиваемых элементов

Question

Я использую React Dnd (с бэкэндом мыши) для перетаскивания элементов, и он работает как шарм. Однако у меня может быть случай, когда я хочу иметь возможность проверить:

monitor.isDragging()

Снаружи компонентов Source и Target, чтобы узнать, есть ли текущая операция перетаскивания.

Answer 1

Из вашего вопроса не ясно, можете ли вы в настоящее время тестировать monitor.isDragging() из DragSource/DropTarget, поэтому я начну с предположения, что вы не знаете, как это сделать.

Прежде всего, любой компонент, заключенный в 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, а затем проверяется, отображается ли класс или что-то в этом роде).

Чтобы проверить его за пределами тестов компонента 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;