javascript - @testing-library/react (rtl) 'waitFor' 只有在没有 await 关键字的情况下才会成功

Question

await waitFor()使我的测试失败，但 waitFor()使我的测试成功(无需等待)。
官方文档说

The async methods return a Promise, so you must always use await or .then(done) when calling them. (https://testing-library.com/docs/guide-disappearance)

我不知道如何正确测试。
我必须使用 rerender ?

it('toggles active status', async () => {
  render(<List {...listProps} />);
  const targetItem = screen.getByRole('heading', { name: /first/i });

  // de-active color is GRAY2, active color is MINT
  expect(targetItem).toHaveStyle({ color: GRAY2 });

  // click to change the color of targetItem
  // it dispatch action that update listProps
  // So changing listProps makes <List /> re-rendering
  fireEvent.click(targetItem);

  await waitFor(() => {
    // It throws an error because the color is still GRAY2 in jest runner.
    // But, in chrome browser, it's color MINT.
    expect(targetItem).toHaveStyle({ color: MINT }); // fail
  });

  // If not use 'await' keyword, this works well.
  // jest runner knows the color is MINT
  waitFor(() => {
    expect(targetItem).toHaveStyle({ color: MINT });
  });
});

Answer 1

如果我使用 waitFor()没有 await它不会失败，但也不会真正成功。
期望语句在没有测试的情况下通过。waitFor()没有等待是我的误解。即使失败了也总是成功的。
最后，我知道测试框架无法检测到更改 Prop 的结果。
props 是从父组件传递的，即使它实际上在 redux 存储中。
总之，我想测试子组件。
它从 Parent Component 获取 props，Parent 获取数据以从 redux store 传递 props。
Child 的 Click 事件触发调度并很好地更改存储状态。
但是在测试运行器中，由于渲染是孤立的，似乎会导致错误。
存储状态已更改，但 Prop 已通过仍未更改
所以我改变了 Child 数据结构，没有从 Parent 获取 Prop ，而是从商店获取。