reactjs - 如何等待 Jest 和/或 Enzyme 中的 React 组件完全完成更新？

Question

在我的 create-react-app 中，我试图测试一个在安装时执行多个 setState 的组件。

class MyComponent extends React.Component {

  state = {
    a: undefined,
    b: undefined,
    c: undefined,
  };

  fetchA() {
    // returns a promise
  }

  fetchB() {
    // returns a promise
  }

  fetchC() {
    // returns a promise
  }

  async componentDidMount() {
    const a = await fetchA();
    this.setState({ a });
  }

  async componentDidUpdate(prevProps, prevState) {
    if (prevState.a !== this.state.a) {
      const [b, c] = await Promise.all([
        this.fetchB(a);
        this.fetchC(a);
      ]);
      this.setState({ b, c });
    }
  }

  ...

}

在我的测试中，我做了类似的事情，尝试让 componentDidUpdate 中的 setState 在做出断言之前完成。

import { mount } from 'enzyme';

describe('MyComponent', () => {

  const fakeA = Promise.resolve('a');
  const fakeB = Promise.resolve('b');
  const fakeC = Promise.resolve('c');

  MyComponent.prototype.fetchA = jest.fn(() => fakeA);
  MyComponent.prototype.fetchB = jest.fn(() => fakeB);
  MyComponent.prototype.fetchC = jest.fn(() => fakeC);

  it('sets needed state', async () => {
    const wrapper = mount(<MyComponent />);
    await Promise.all([ fakeA, fakeB, fakeC ]);
    expect(wrapper.state()).toEqual({
      a: 'a',
      b: 'b',
      c: 'c',
    });
  });

});

这里是有趣的部分:我上面的测试将失败，因为在做出断言时最后一个 setState 调用(在 componentDidUpdate 中)尚未完成。此时，state.a已设置，但state.b和state.c尚未设置。

我可以让它工作的唯一方法是在断言之前加入 await Promise.resolve(null) ，为最后一个 setState 提供额外的刻度/周期完全的。这看起来太老套了。

我尝试过的另一件事是将断言包装在 setImmediate() 中，只要断言通过，它就可以正常工作。如果失败，它将因 Uncaught Error 而终止整个测试。

有人解决这个问题了吗？

Answer 1

我就是这样解决的。希望对某人有所帮助。

import { mount } from 'enzyme';

describe('MyComponent', () => {

  const fakeA = Promise.resolve('a');
  const fakeB = Promise.resolve('b');
  const fakeC = Promise.resolve('c');

  MyComponent.prototype.fetchA = jest.fn(() => fakeA);
  MyComponent.prototype.fetchB = jest.fn(() => fakeB);
  MyComponent.prototype.fetchC = jest.fn(() => fakeC);

  it('sets needed state', async (done) => {
    const wrapper = mount(<MyComponent />);
    await Promise.all([ fakeA, fakeB, fakeC ]);

    setImmediate(() => {
      // Without the try catch, failed expect will cause the
      // whole test to crash out.
      try {
        expect(wrapper.state()).toEqual({
          a: 'a',
          b: 'b',
          c: 'c',
        });
      } catch(error) {
         done.fail(error);
      }
      done();

  });

});