test failed with msw, but works with other mock server library

[tofutree23]

Environment

Name	Version
msw	0.35.0
node	14.15.4
OS	windows 10

Request handlers

import { setupServer } from 'msw/node'
import { rest } from 'msw'

const server = setupServer(
  rest.get('/v1/check-rsa', (req, res, ctx) => {return res(ctx.status(200), ctx.json({ rsa_key: '' }))}),
  rest.post('/v1/auth', (req, res, ctx) => { return res(ctx.status(400), ctx.json({ error: 'invalid user' }))})
)

beforeAll(() => server.listen({ onUnhandledRequest: 'warn' }))
beforeEach(() => server.resetHandlers())
beforeAll(() => server.close())

describe('[LoginForm]', () => {
  it('Login will be failed with invalid user info', () => {
    fireEvent.change(screen.getByTestId('id'), {
      target: { value: 'test_id' },
    })
    fireEvent.change(screen.getByTestId('pw'), {
      target: { value: 'test_pw' },
    })

    const button = screen.getByTestId('submit')
    fireEvent.click(button)

    await waitFor(() => {
      expect(screen.getByText(invalidInfo)).toBeInTheDocument()
    })
  })
})

Actual request

const { data: { rsa_key } } = await axios.get('/v1/check-rsa')
if (rsa_key) {
  // ...
}

return await axios.post('/v1/auth', {
  id,
  pw,
})

Current behavior

When the login button is clicked, send two requests sequentially: GET and POST. And the test ends with Network Error.
In some cases, when the GET request was removed and only the POST request was sent, it was successful.
Error: connect ECONREFUSED 127.0.0.1:80 is the main message in the log that appears when it fails, and axios baseUrl is already set up in setupTest.js.
If logic that is completely the same as this is requested through the axios-mock-adapter, the test passes normally.

Below is an example of a code using an axios-mock-adapter

import axios from 'axios'
import MockAdapter from 'axios-mock-adapter'

const mockServer = new MockAdapter(axios)

  mockServer
    .onGet('/v1/check-rsa')
    .reply(200, { rsa_key: '' })
    .onPost('/v1/auth')
    .reply(400, { error: 'invalid user' })

Expected behavior

The test must pass like axios-mock-adapter

Screenshots

[kettanaito]

Hey, @tofutree23.

There are a few issues with your setup that may be causing the behavior you're experiencing.

1. Two beforeAll hooks, where first enables the mocking and the second disables it immediately. I believe you meant to use afterAll:

beforeAll(() => server.listen({ onUnhandledRequest: 'warn' }))
beforeEach(() => server.resetHandlers())
-beforeAll(() => server.close())
+afterAll(() => server.close())

2. If you configure Axios with any options that affect request URL (i.e. base URL), make sure you account for those options when declaring handlers. For instance, in the case of base URL, export that URL and prepend it to each handler:

import { BASE_URL } from './my-axios-setup'

const server = setupServer(
  rest.get(BASE_URL + '/v1/check-rsa', (req, res, ctx) => {return res(ctx.status(200), ctx.json({ rsa_key: '' }))}),
  rest.post(BASE_URL + '/v1/auth', (req, res, ctx) => { return res(ctx.status(400), ctx.json({ error: 'invalid user' }))})
)

[tofutree23]

Oh, I'm sorry. 😰

1. This is a typo in here. That's not the problem. sorry again. I closed the server in afterAll hook.
2. This is one of the ways I've already tried while debugging. This also didn't work well.😓

[kettanaito]

Can you share the reproduction repository? I can’t help much just by looking at the code.

[tofutree23]

It is impossible to share the repository because it is not my individual's, but the company's private repository.
So I'm trying to create a similar environment as possible, but the same problem doesn't happen in my personal repository.

At first, I thought there was a problem that the server was disconnected in advance if two requests were made at the same time, but it was not. I think it may be a problem with the company's backend logic(It is made by GO) or something... But if so, why does it work normally in other libraries? It's a strange thing.

[kettanaito]

I don't think it's the backend's issue, it's most likely a mocking setup issue. That's one of the reasons I ask people to prepare reproduction repos—because while doing so you spot the difference between a minimal scenario and yours. Often, that difference hints you what's going on wrong.

Sorry, I can't help you much without an actual code to run and debug. I suggest you follow this guide to debug uncaught requests.

[tofutree23]

Okay, I'll have to test it through another library until find the problem.
Nothing was caught in the unHandledRequest.
Thank you for your kind reply.