Why does setupMsw() need to be in the global scope of a jest module?

[bzitzow]

Hello,

We recently observed this behavior. The questions are:

a) How come the server needs to be in the global scope?
b) How come it does not intercept requests if the server is instantiated per test (in the beforeEach())?

Environment:

• msw
• jest
• React
• Node

🛑 Test Setup 1)

Given Test Setup 1), the MSW server was not intercepting the requests as expected.

import { setupServer } from 'msw/node';

const exampleHandler = rest.get('/example/path', (req, res, ctx) => {
    console.log("Request Intercepted!", req);
    return res(ctx.status(200), ctx.json(stubResponse));
});

describe('description of test context', () => {
  let server;
  beforeEach(() => {
    server = setupServer();
    server.use(exampleHandler)
    renderComponent(...);
  });
});

✅ Test Setup 2)

Given Test Setup 2), it does intercept the requests as expected.

import { setupServer } from 'msw/node';

const exampleHandler = rest.get('/example/path', (req, res, ctx) => {
    console.log("Request Intercepted!", req);
    return res(ctx.status(200), ctx.json(stubResponse));
});

const server = setupServer();

describe('description of test context', () => {
  beforeEach(() => {
    server.use(exampleHandler)
    renderComponent(...);
  });
});

[kettanaito]

Hi, @bzitzow.

Let's clarify that setupServer by itself only constructs the public API and does nothing else. It's the server.listen() part that initializes the actual interception of requests. So, to stay on the same page, it matters where you call server.listen().

I do believe this comes down to how your testing framework evaluates the describe blocks and any other levels of nesting. The code may be evaluated in a different order than it's written, which is not always apparent. I don't have a concrete example but this is something to keep in mind.

There has been a very similar question in #1283, where I go into detail about why nesting setupServer in "describe" blocks is unnecessary and not recommended. You need to apply the interception only once. What people actually want to scope is the handlers that are being applied between the "describe" blocks, and for that please nest server.use() instead.

[kettanaito]

That is why we recommend doing this part in your setup file:

// test/api.js
import { setupServer } from 'msw/node'

// You can also provide happy path handlers here
// to apply to all tests. You can later change their
// behavior by using "server.use()" overrides.
export const server = setupServer()

// jest.setup.js
import { server } from './test/api'

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

And then, if you wish for a certain group of test to have a different network behavior, leverage server.use():

// test/my.test.js
describe('offline support', () => {
  beforeEach(() => {
    server.use(rest.all((req, res, ctx) => {
      return res.networkError()
    }))
  })
})