Is it possible to pass test only if valid data was sent to msw endpoint?

[olegKusov]

I need somehow to get req data in my test

Example:

it('should send valid data, () => {
  server.listen('/test-endpoint', (req) => {
      expect(reqData).toStrictEqual(myData);
  });
});

Is it possbile? Because I have a lot of mess in my component with local state, wich can be changed with side effects. And I need to be sure that data sends correctly.

[kettanaito]

Hey, @olegKusov.

We have a recipe on Request assertions in our docs. In short, you rarely need to assert on requests directly and should consider testing the logic/UI that derives from the successful (or unsuccessful) response.

There are cases, however, when you need to assert the request directly. For example, when a request is internal (analytics, metrics) or has no logic derived from it. In those rare scenarios you can leverage the life-cycle events API to await the request and assert on it:

import { setupServer } from 'msw/node'

const server = setupServer(...)

/* Your regular MSW setup here in "beforeAll"/"afterAll"... */

it('sends the correct Google Analytics payload', (done) => {
  doStuff()

  // Listen to all requests that match a defined request handler.
  server.on('request:match', (request) => {
    expect(request.body).toEqual(myData)
    done()
  })
})

[olegKusov]

Wow! Thank you! I decided to spy on axios, but this variant looks good too! Thanks!

[kettanaito]

Note that when you're spying on the request client (axios in your case), you're removing a significant chunk of axios' logic, thus making your test less reliable. There's also no point in combining request client spy and MSW, as the latter exactly encourages you to get rid of any kind of spies and perform requests as-is.

[olegKusov]

@kettanaito It's strange but tests after test with server.on failing.

[kettanaito]

Could you please share your testing setup and the test file? server.on is a side-effect, it doesn't affect the request/response flow.