How to mock Promise.all?

[alessandrocapra]

Let's say I have an endpoint called /balances.

Mocking the single request is easy, but another use case is to call multiple times this endpoint for each currency (e.g. /balances/EUR, /balances/USD. To do so, I pass all the currency codes and make a Promise.all(...) request with the different URLs.

The following test works for a single call, but if the widget uses the Promise.all(...) case I just get an array with the ctx.json message, but the promise is not rejected so the test is failing.

Am I missing something? Thanks!

it("shows error message if /balances API returns an error", async () => {
    server.use(
      rest.get("http://localhost/api/balances", (req, res, ctx) => {
        return res(
          ctx.status(500),
          ctx.json({
            message:
              "An unexpected error has occured.",
            errors: null,
            values: null,
          })
        );
      })
    );

    render(<BalancesWidget />);

    expect(
      await screen.findByText("Cannot retrieve balances")
    ).toBeInTheDocument();
  });

[kettanaito]

Hey, @alessandrocapra.

First things first, you'd have to create a handler to account for the /balances/:currency requests:

rest.post('/balances/:currency', (req, res, ctx) => {
  // req.params.currency — to get the exact value
  return res(/* your mocked response */)
})

Once this is done, go to the test case that asserts how your UI handles that request's failures and override the response in the same manner as you've posted above:

it('shows error message if /balances/:currenty API returns an error', async () => {
  server.use(
    rest.post('/balances/:currency', (req, res, ctx) => {
      return res(ctx.status(500))
    })
  )

  // ...assert your UI here.
})

Keep in mind that different request clients handle 4xx/5xx responses differently. For instance, window.fetch does not reject the promise when receiving such responses. This means that await Promise.all() won't reject when getting a 500 response. Make sure you implement the correct logic to catch and handle error responses to /balances/:currency.

[alessandrocapra]

Thanks for you reply!

I've already added the handler, I guess the issue is indeed the request client, I am using SWR as library to handle requests and Axios as a fetcher, so it should boil down to Axios.

I looked some docs and couldn't find a clue on how to make that promise fail, do you have perhaps a suggestion? Thanks a lot for your help!

[kettanaito]

Just take a look at how the code behaves when you disable MSW. Basically, see if Promise.all() rejects at all. If it doesn't handle the error cases via .then() and look what status code you've received.

await Promise.all([req1, req2, re3]).then(([responses]) => {
  const hasError = responses.some(response => response.status >= 400)
  if (hasError) {
    setErrorInTheUI('Request failed!')
  }
})

[alessandrocapra]

Replying late here, it turns out that I had some misconfiguration between MSW and Testing Library, it all works fine now! Thanks for your help