How do I handle difference responses to the same endpoint?

[CodyBontecou]

I'd like to test views when given no data, errors, and expected data.

I can create the handler to manage a single response, but what's the best way to manage multiple responses for the same endpoint depending on the state I'm trying to test?

[CodyBontecou]

I found the permanent override. Is this the proper solution? Write my handlers within the test file itself?

[msutkowski]

@CodyBontecou I like to set handlers for default behaviors, and then for special cases leverage a combination of res.once and individual handlers like you're saying on a test-by-test basis.

[kettanaito]

Hey, @CodyBontecou.

Please use the runtime handlers in the combination with resetting handlers between tests. That way you don't have to use res.once().

const server = setupServer(
  rest.get('/resource', (req, res, ctx) => res(ctx.text('hello')))
)

beforeAll(() => server.listen())
afterEach(() => server.resetHandlers())
afterAll(() => server.close())

test('happy path', ()  => {
  // make request.
})

test('error stat', () => {
  server.use(
    rest.get('/resource', (req, res, ctx) => res(ctx.status(500)))
  )
  // make request
})

test('another state', () => {
  server.use(
    // Model any response overrides you need.
    rest.get('/resource', (req, res, ctx) => res(ctx.status(403)))
  )
  // make request
})

This setup is also illustrated in the React Testing Library example.

[CodyBontecou]

Okay, I have access to window.msw within my local web browser, but it appears to be undefined when running Cypress.

[kettanaito]

Submit a reproduction repository then so we could take a look.

[CodyBontecou]

Sure, here you go https://github.com/CodyBontecou/msw-cypress-nextjs-typescript

[CodyBontecou]

Hey @kettanaito, just a friendly bump. Is this repo explicit enough, or would you like me to break it down further to the specific problem?

[kettanaito]

I haven't got time to look into this. I'll update this thread once I do.