How to await API response resolved in Jest tests about mswjs.io

[slaweet]

@kettanaito thank you so much for the tips. I already asked in vue-test-utils discord chat, I'll see what answers will I get there.

[kettanaito]

Hey, @slaweet.

It is not the responsibility of MSW to await responses. You perform an actual request, and you get the mocked response. MSW ensures it captures a request how you described, and responds with whichever mocked data you want. It's your app's responsibility to await the response, there's nothing new in that:

const res = await fetch('https://my.backend.dev')

In the Kent's article the part that awaits something is await screen.findByRole('alert'). Notice that it's an async assertion, thus there is the await keyword, which ensures the Promise returned by screen.findByRole is resolved prior to running the assertion. That part awaits that the given element becomes present on the screen (note: not the response), as the consequence of a successful response.

Please, whenever you face an issue, include the way how you use mocks and how you perform an actual request. This information is automatically asked of you if you file an issue in the MSW repository, which I would highly encourage you to do in case of issues.

[slaweet]

Hi @kettanaito,
thank you for a thorough response.

I would very much like to handle it as in Kent's article. But I'm doing it on a project that uses vue-test-utils which doesn't provide such utility, unlike React Testing Library he's using in the article. My way around that was using https://www.npmjs.com/package/flush-promises That worked fine when I was mocking axios, but that doesn't work with MSW.

Looks like I opened an issue in a wrong place. I opened it here, because by migrating to MSW I lost the ability to ensure there are no pending API requests in a test and I still don't quite understand why. Are there any docs that I could read to understand what are all the steps that happen when a jest test calls an API mocked by MSW?

Thank you.

[kettanaito]

vue-test-utils reference the Asynchronous testing using axios as an example. However, it leverages mocking of axios.get, which I'd not consider a good practice.

I can recommend you to either discuss this with the maintainers of vue-test-utils to provide a way to await for an element to appear (seems a very common scenario even outside of async testing), or implement your own assertion utility with an interval and a timeout that await for a certain thing to happen.

Take a look at how waitFor is implemented in React Testing Library: https://github.com/testing-library/dom-testing-library/blob/fe04b503df13be9207769b5d61d67c5532e24636/src/wait-for.js#L21