リアクションコンポーネントの更新が完了するまで待つ

Question

私のテストでは、子コンポーネントを追加するイベントをトリガーした後で、自分のコンポーネントの1つがライフサイクルメソッドを終了するまでメインスレッドをブロックしたいと考えています（componentDidUpdate()）。それ自体に。どうすればいいですか？このような

何か：

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

は（私は、今、私はこの警告を得るためにこれをしたい：

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. 

私は私のテストが引き起こすので、私はそれを取得しています信じているし、私のコンポーネントが内部の状態をReactの内部マルチスレッドマジックよりも速く変えることができるので、今度はbutton.simulate('click')を2回実行するまでにReactが新しい子コンポーネントをインスタンス化しましたが、まだマウントを完了していません。反応を完了させるための更新私のコンポーネントとその子をすると、その問題を解決するための最良の方法です）

Answer 1

setImmediate()ブロックであなたのexpect()ブロックをラップしてみてください。

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

ここで何が起こっているのだ：非同期、ノードおよびほとんどのブラウザに対応するために舞台裏でイベントキューを持っている。プロミスやIOイベントのようなものが非同期に実行される必要があるときはいつでも、JS環境はそれをキューの最後に追加します。次に、同期コードが実行を終了するたびに、環境はキューをチェックし、キューの先頭にあるものを取り出して実行します。

setImmediate()は、キューの後ろに関数を追加します。現在キューにあるすべてのものが実行されたら、setImmediate()に渡された関数内のものが実行されます。したがって、どのようなReactが非同期で行っていても、setImmediate()の中にexpect()をラップすると、バックグラウンドで実行される非同期作業でReactが終了するまでテストが待たれます。ここで

は、より多くの情報についてsetImmediate()を持つ偉大な質問です：setImmediate vs. nextTick

ここノードでsetImmediate()のドキュメントです：https://nodejs.org/api/timers.html#timers_setimmediate_callback_args