javascript - @testing-libraryreact (rtl) 'waitFor' makes only success without await keyword - Stack Overflow

admin管理员组

文章数量:1357678

await waitFor() makes my test fail but waitFor() makes my test successful (without await).

The official doc said

The async methods return a Promise, so you must always use await or .then(done) when calling them. ()

I don't know how can I test correctly. do I have to use 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 });
  });
});

await waitFor() makes my test fail but waitFor() makes my test successful (without await).

The official doc said

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

I don't know how can I test correctly. do I have to use 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 });
  });
});

• javascript
• reactjs
• typescript
• react-testing-library

Share Improve this question Follow edited Jan 7, 2021 at 5:31 Dylan Ju asked Jan 7, 2021 at 5:14 Dylan JuDylan Ju 56611 gold badge77 silver badges1818 bronze badges 3

• I think the problem is dispatch action. A new way of using rerender not waitFor() makes success. I guess that the results of re-rendering DOM by changing props are not concerns with ponent test. is it right? or not – Dylan Ju Commented Jan 7, 2021 at 5:59
• 2 As the docs say, you should always await for waitFor.The fact that then test passes if you don't use await is because the assertion expect(targetItem).toHaveStyle({ color: MINT }); will not happen. Make sure you're testing the correct behaviour. – juliomalves Commented Jan 7, 2021 at 13:15
• @juliomalves yes you're right. I wrote the answer because of the limitation of ment string length. – Dylan Ju Commented Jan 9, 2021 at 1:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

If I use waitFor() without await it won't fail, but also isn't truly successful.

expect statement to pass through without testing. waitFor() without await is my misconception. It's always successful even if has to fail.

Finally, I have known that test framework cannot detect results of changing props. The props are passed from Parent Component even if it is in redux store in fact.

In summary, I want to test Child Component. It gets props from Parent Component, Parent gets data to pass props from redux store.

Click event of Child fires dispatch and change store state well. But in test runner, because rendering is isolated, It was seemed to cause an error. Store state was changed but props was passed still not changed So I changed Child data structure not getting props from Parent but getting from store.

because if you are not awaiting , you are getting a promise, which is a truthy value. now if you do await and the promise resolves to a falsy value only in that case your test case will fail

本文标签： javascripttestinglibraryreact (rtl) 39waitFor39 makes only success without await keywordStack Overflow