Warten, bis eine React-Komponente die Aktualisierung abgeschlossen hat

Question

In meinen Tests möchte ich meinen Hauptthread blockieren, bis eine meiner Komponenten die Lebenszyklusmethoden durchläuft, und zwar durch componentDidUpdate(), nachdem ich ein Ereignis ausgelöst habe, das dazu führt, dass untergeordnete Komponenten hinzugefügt werden zu sich selbst. Wie kann ich das tun?

Etwas wie folgt aus:

describe('my <Component />',() => { 
    it('should do what I want when its button is clicked twice',() => { 
    const wrapper = mount(<Component />); 
    const button = wrapper.find('button'); 

    // This next line has some side effects that cause <Component /> to add 
    // some children components to itself... 
    button.simulate('click', mockEvent); 

    // ... so I want to wait for those children to completely go through 
    // their lifecycle methods ... 
    wrapper.instance().askReactToBlockUntilTheComponentIsFinishedUpdating(); 

    // ... so that I can be sure React is in the state I want it to be in 
    // when I further manipulate the <Component /> 
    button.simulate('click', mockEvent); 

    expect(whatIWant()).to.be.true; 
    }); 
}); 

(Ich möchte, dies zu tun, weil, gerade jetzt, ich diese Warnung erhalten:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. 

Ich glaube, ich bin immer es, weil meine Tests meine verursachen Um den internen Zustand schneller zu ändern, als Reacts interne Multithreading-Magie mithalten kann, hat React die neuen Kindkomponenten instanziiert, bis ich das erste Mal button.simulate('click') ausgeführt habe, aber noch nicht fertig für Reagieren, um Aktualisierung zu beenden meine Komponente und ihre Kinder ing ist der beste Weg, um dieses Problem zu lösen)

Answer 1

Versuchen Sie expect() Blöcke in einem setImmediate() Block Verpackung:.

describe('my <Component />',() => { 
    it('should do what I want when its button is clicked twice', (done) => { 
    const wrapper = mount(<Component />); 
    const button = wrapper.find('button'); 

    button.simulate('click', mockEvent); 
    button.simulate('click', mockEvent); 

    setImmediate(() => { 
     expect(whatIWant()).to.be.true; 
     done(); 
    }); 
    }); 
}); 

Hier ist was los: Asynchronität, Knoten und den meisten Browsern umgehen habe eine Ereigniswarteschlange hinter den Kulissen. Wenn etwas wie ein Promise- oder ein IO-Ereignis asynchron ausgeführt werden muss, fügt die JS-Umgebung es am Ende der Warteschlange hinzu. Wenn dann ein synchroner Codeabschnitt ausgeführt wird, überprüft die Umgebung die Warteschlange, wählt aus, was sich an der Spitze der Warteschlange befindet, und führt sie aus.

setImmediate() fügt der Rückseite der Warteschlange eine Funktion hinzu. Sobald alles, was gerade in der Warteschlange ist, beendet ist, wird ausgeführt, was in der Funktion an setImmediate() übergeben wird. Also, was auch immer Reaction asynchron macht, Ihr expect() s innerhalb einer setImmediate() Wrack wird Ihren Test warten, bis React mit was auch immer asynchrone Arbeit hinter den Kulissen abgeschlossen ist.

Hier ist eine große Frage, mit mehr Informationen über setImmediate(): setImmediate vs. nextTick

Hier ist die Dokumentation für setImmediate() in Knoten: https://nodejs.org/api/timers.html#timers_setimmediate_callback_args