MSW Breaks Jest Mocks?!

Describe the bug

Currently we are transitioning our Typescript Jest test setup to testing-library and msw. Everything works and feels great (thank you!) so far, except that apparently msw seems to break our mocks.

As soon as we add to our jest-setup file:

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

Some(!), but not all, mocks are not working anymore. (It seems like that they’re not hoisted anymore?!). For example just console.logging (without using server) inside beforeAll works fine as well.

Probably that problem has nothing to do with msw, but nonetheless enabling the server seems to interfere with our system somehow.

Environment

• msw: ^0.35.0
• jest: ^27.2.4,
• ts-jest: ^27.0.5,
• whatwg-fetch: ^3.6.2,
• nodejs: v14.17.6
• typescript: ^4.4.3,
• yarn2

To Reproduce

I was not able to reproduce it in a minimal example, sorry… which is also strange

Expected behavior

I want to keep using my jest.mocks when I enable msw

[cbookg]

Ok, so I figured it out and I’ll post here for any future readers.

The file containing my msw handlers was referencing a string constant imported from another file, and the chain led back to the file where the mocked import was not taking effect.

I think because the server is initialized in setupTests’s beforeAll(), it would cause my underlying module to load before the test was run, so before it would hoist the jest.mock.

[LittleHendrix]

Ok, so I figured it out and I’ll post here for any future readers.

The file containing my msw handlers was referencing a string constant imported from another file, and the chain led back to the file where the mocked import was not taking effect.

I think because the server is initialized in setupTests’s beforeAll(), it would cause my underlying module to load before the test was run, so before it would hoist the jest.mock.

@cbookg 🙏 Thank you for digging deeper and explaining what’s happened there. Was scratching my head over the failing jest.mock before I stumbled across this post. I moved the import to another location and problem went away! We use msw extensively, this is a good tip for avoiding such issues in the future.