ist React dnd Drag-State Zugriff von außen gezogenen Elemente

Question

Ich verwende React Dnd (mit Maus-Backend) zum Ziehen von Elementen und es funktioniert wie ein Charme. Jedoch kann ich einen Anwendungsfall, wo ich zu Test der Lage sein wollen:

monitor.isDragging() 

Von außerhalb der Quell- und Zielkomponenten, zu wissen, ob es eine aktuelle Schleppen Betrieb ist.

Answer 1

Aus Ihrer Frage ist es nicht klar, ob Sie derzeit monitor.isDragging() bereits aus einer DragSource/DropTarget testen können, also gehe ich davon aus, dass Sie nicht wissen, wie das geht.

Zunächst kann jede Komponente, die in eine DragSource/DropTarget eingeschlossen ist, nicht außerhalb eines Drag & Drop-Kontexts gerendert werden. Daher müssen Sie sicherstellen, dass Ihre Komponente innerhalb eines gefälschten Drag & Drop-Kontexts gerendert wird über von 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 />); 
 
});

Sobald Sie Ihre Komponente wie dies gemacht haben, können Sie nun den Monitor wie folgt zugreifen (die getMonitor() Funktion ist nicht in der Dokumentation, aber es ist da und funktioniert wie man es erwartet):

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

 
const monitor = manager.getMonitor();

Daher können Sie jetzt zugreifen isDragging mit monitor.isDragging() (Hinweis: Sie können auch diese Monitorfunktionen Stummel, wenn Ihr Anwendungsfall beinhaltet isDragging auf true setzen und die Überprüfung dann später, wenn eine Klasse gemacht wird oder so).

es Um zu überprüfen, von außerhalb einer Quelle oder Tests der Zielkomponente, alle, die dann innerhalb der genannten Komponenten Tests erforderlich sein sollte, ist so etwas wie:

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;