は、ドラッグされたアイテムの外側からドラッグ＆ドロップ可能な状態になります。

Question

アイテムをドラッグするためにRend Dnd（マウスバックエンド付き）を使用しています。現在のドラッグ操作がありますかどうかを知るために、ソースとターゲットのコンポーネント外部から

monitor.isDragging() 

： は、しかし、私は私がテストできるようにしたいユースケースを有することができます。

Answer 1

あなたは現在、DragSource/DropTarget内からすでにmonitor.isDragging（）をテストできるかどうかは不明です。その方法を知らないと仮定して始めます。

まず、DragSource/DropTargetにラップされたコンポーネントは、ドラッグ＆ドロップコンテキスト外ではレンダリングできないため、偽のドラッグアンドドロップコンテキスト内でコンポーネントをレンダリングする必要があります以上のあなたは、このようなあなたのコンポーネントをレンダリングしたら

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

）https://react-dnd.github.io/react-dnd/docs-testing.htmlから、あなたは今（getMonitor（）関数は、ドキュメントではありませんが、それはだ、このようにモニターにアクセスすることができますあなたが期待するような作品があります）：

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

 
const monitor = manager.getMonitor();

したがって、あなたは今monitor.isDragging()でisDraggingアクセスすることができます（注：ご使用の場合はtrueにisDraggingを設定し、クラスがレンダリングされる場合は、後で確認する必要場合にも、これらのモニター機能をスタブすることができますか何か）。

ソースまたはそのコンポーネント・テストの内部で要求されるべき対象のコンポーネントのテスト、すべての外部からそれをチェックするためには、何かのように：

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;