javascript - 使用 enzyme : how to wait for setState within component's method to finish before proceeding with test case 的 JS 单元测试

Question

我有一个组件 MyComponent，其方法 doSomething 更新状态，renderChildren 根据这些状态呈现子组件:

class MyComponent extends Component {
  constructor(props) {
    super(props);
    ...
    this.state = {
      renderChildA: true,
      renderChildB: false,
    };
  }

  doSomething = (params) => {
    // Do something...

    this.setState({ 
      renderChildA: false,
      renderChildB: true,
    });
  }

  renderChildren = () => {
    const { renderChildA, renderChildB } = this.state;
    if (renderChildA) {
      return <ChildComponentA />;
    } else if (renderChildB) {
      return <ChildComponentB />;
    }
  }

  render() {
    return (
      <div>
        {this.renderChildren()}
        ...
      </div>
    );
  }
}

注意:该组件也连接到 Redux，但已被简化。

对于单元测试，我正在调用 doSomething 并验证 ChildComponentB 是否可见:

test('doSomething should trigger ChildComponentB to pop up', () => {
  const wrapper = shallow(
    <MyComponent
    ...
    />,
  ).dive();

  wrapper.instane().doSomething(params); // assume params is defined

  const childComponentB = wrapper.find('ChildComponentB');
  expect(childComponentB).toHaveLength(1);
});

然而，上面的测试用例失败了:

my-component.test.jsx > Some test group name > doSomething should trigger ChildComponentB to pop up

    expect(received).toHaveLength(length)

    Expected value to have length:
      1
    Received:
      // Some giant JSON object
    recevied.length:
      0

      xxx |    const childComponentB = wrapper.find('ChildComponentB');
      xxx |    expect(childComponentB).toHaveLength(1);
      xxx |  });

根据日志记录，我发现 doSomething 中的 setState 是在测试用例中的 expect 语句之后触发的。我怀疑这是自 setState is asynchronous 以来发生的，但我不知道解决方法(setTimeout 除外)。

Answer 1

您可以尝试手动更新组件以获取最新状态:

  wrapper.instance().doSomething(params); // assume params is defined
  wrapper.update(); 
  const childComponentB = container.find('ChildComponentB');
  expect(childComponentB).toHaveLength(1);

更多信息:https://airbnb.io/enzyme/docs/api/ShallowWrapper/update.html