Wait for React to complete the update.

Question

In my tests, I would like to block the main thread until one of my components completes its life methods, after componentDidUpdate(), after I raise an event that forces it to add child components to itself. How can i do this?

Something like that:

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

(I want to do this because right now I am getting this warning:

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') , React , . , - .)

Answer 1

expect() setImmediate():

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

: , Node . , -, -, , JS . , , , , , .

setImmediate() . , , , , , setImmediate(), . , , React , expect() setImmediate() , React , .

setImmediate(): setImmediate vs. nextTick

setImmediate() Node: https://nodejs.org/api/timers.html#timers_setimmediate_callback_args