How to Jest test status 4xx/5xx?

[Uniiq]

Hello,

i tried to test my toast message but the test fails because of Error: thrown: HttpResponse. It only happens on http.post with HttpResponse status 400-500. Any idea how to test such a case?

const activateErrorMock = http.post(`/activate`, () => {
  return HttpResponse.json({ errorMessage: 'Custom error' }, { status: 400 })
})

describe('Activate', () => {
  const mswServer = setupServer()
  beforeAll(() => mswServer.listen())
  afterEach(() => mswServer.resetHandlers())
  afterAll(() => mswServer.close())

  it('should render error toast message', async () => {
    mswServer.use(activateErrorMock)
    renderWithClient( //react-query
        <CodeActivationCard />
    )
    const pinInput = screen.getAllByLabelText('PinInput')
    const submitButton = screen.getByRole('button', { name: 'Activate' })

    await userEvent.keyboard('000000000000')
    await userEvent.click(submitButton)

    expect(screen.getByText('Oops!')).toBeInTheDocument()
    expect(screen.getByText('Sorry, something went wrong. Please try again!')).toBeInTheDocument()
  })
})

Best regards,
Uniiq

[Uniiq]

I found the problem. I use react-query and changed mutateAsync to mutate and after this change the test runs through. Any idea why msw behaves this way when i use mutateAsync?

[kettanaito]

This sounds like something specific to the test setup/React Query. MSW has nothing to do with those options. It will intercept any HTTP request in Node.js and handle it as you describe in the handlers, as simple as that.

I'd like to learn more about the error you get because Error: thrown: HttpResponse looks quite cryptic. Can you please post the entire error, including its stack trace? That alone can hint at what's going on. Thanks!