Explicitally waiting for a network request

[mswjs]

Explicitally waiting for a network request

[kettanaito]

Hey, @jmcrthrs. Thanks for reaching out.

When it comes to testing intermediate state (i.e. loading), consider using the ctx.delay() utility. It allows to set a response delay, thus making the loading state apparent in the UI. Here's how it'd look in your request handlers:

rest.post('/login', (req, res, ctx) => {
  return res(ctx.delay(5000), ctx.json({ some: 'response' })
})

The example above would delay the mocked response by 5000ms (5s), making it enough time for your testing framework to capture the loading state.

You can also consider using it like ctx.delay(Infinity), which would produce a mocked response that would never resolve.

---

So I assume there is no need for us to explicitly wait in our tests for the network response?

You're assuming correctly. Most of the test frameworks have a retry mechanism built-in, so the framework would run your assertion repeatedly for an N amount of time until it becomes true. This works beneficial when asserting UI derived from asynchronous operations like HTTP requests.

Certain frameworks may provide you with an API to explicitly await HTTP requests, but you'd have to look such API up in their respective documentations. The usage of such API is up to you.

Let us know if you have any other questions.

[timdeschryver]

I have forked this repo and added an assertion after the Login form is submitted, but it can never find the button.

In the html the button is marked with submit-button as test id

<button data-testid="submit-button" type="submit" className={loading ? "loading" : ""}>
          Submit
</button>

While the test is looking for button as test id

cy.get('[data-testid=button]').should('have.class', 'loading')

[jmcrthrs]

@timdeschryver Hey Tim, I think perhaps you have an old commit. Can you pull and try again?

The latest commit should be jmcrthrs@8bae3d8

[timdeschryver]

So I assume there is no need for us to explicitly wait in our tests for the network response

Cypress has a retry ability, so even when the element isn't visible cypress will retry the query until it finds the element or times out. Because of this, I almost never wait for an HTTP request in my tests.

I have forked this repo and added an assertion after the Login form is submitted, but it can never find the button.

This is because the MSW handler returns the result immediately so React doesn't render the loading indicator.
When you add a delay to the handler (like the one you commented out), it will work.