Jest + React-testing-library - wait for a mocked async function to complete

Question

My componentDidMount() fires off a call to an async function but depending on the result of that function, it might not result in any DOM change. Is there any way I can wait for the function to complete in my tests?

Here's an example - the click button is initially disabled. If the async function returns true, the click button should be enabled:

myAsyncFunction.mockImplementation(() => true);
const {queryByText} = render(<Component />);
const button = queryByText("Click");
expect(button).toBeDisabled();
await waitFor( () => expect(button).not.toBeDisabled() );
expect(button).not.toBeDisabled();

But if it returns false the button stays disabled:

myAsyncFunction.mockImplementation(() => false);   // async returning different value
const {queryByText} = render(<Component />);
const button = queryByText("Click");
expect(button).toBeDisabled();
await waitFor( () => {} );                       //        <== **** CODE SMELL ****
expect(button).toBeDisabled();

The second test does actually work but the empty waitFor() is considsered bad practice. is there any way to avoid this?

You probably want to fire: await wait(); after rendering component: const {queryByText} = render(<Component />); await wait(); — Branislav Lazic
– Branislav Lazic, Commented Apr 2, 2020 at 14:01
yes, wait() is now deprecated and I beleive that waitFor(()=>{}); is the new equivalent. However I read somewhere (I think it was in the previous version of the react-testing-library docs) that an empty wait() was considered bad practice and you should wait for something concrete instead — Andy
– Andy, Commented Apr 4, 2020 at 10:23

Koleok · Accepted Answer · 2020-04-20 18:37:27Z

36

In the docs for waitFor, it is recommended to just wait for your async function .toHaveBeenCalled like so

await waitFor(() => expect(mockAPI).toHaveBeenCalledTimes(1))

answered Apr 20, 2020 at 18:37

Koleok

6115 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Andy Over a year ago

Aha! thanks, that text has been updated since I asked the question :-). As I understand it, this would wait for the function to be called, but not wait for the promise to be resolved. However, since it's explicit in the docs now, I guess it's OK

Byofuel Over a year ago

What is 'mockAPI' here? Ie, if one is using mswjs.io as recommended by ReactTestingLibrary, would you pass in the return value of setupServer? (I tried but got confusing results which don't indicate whether it's working or not.)

Koleok Over a year ago

This is a direct quote from the testing-library docs, in that context mockAPI is the name they are using to refer to any asynchronous function you might need to wait for before your expectation can be asserted.

Collectives™ on Stack Overflow

Jest + React-testing-library - wait for a mocked async function to complete

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related