MSW Breaks Jest Mocks?!

[hhsl]

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

[kettanaito]

Hey, @hhsl. I'm sorry to hear you're experiencing difficulty migrating to MSW.

I don't think this issue has to do with MSW, however. The library doesn't use or affect Jest or its jest.mock API. There's a chance it helps to facilitate an already present issue. Without a reproduction repository, there isn't much I can advise. The fact that you were unable to reproduce this issue in isolation adds to the assumption that there's indeed an issue somewhere in your test setup or tests themselves.

I can recommend reading through the docs of the Jest API you're using, checking with the examples. Utilize any debugging means available—isolate problematic areas, substitute, do A/B testing. I'm certain you will find the root cause for this. Once you do, please share it here so others may learn from your experience. Thanks.

[cbookg]

Running into the same problem. @hhsl did you ever solve?

[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.

[hhsl]

We decided to rewrite the tests, because introducing testing-library required us to write and think about our tests differently.

So actually i did not solve it, but your approach looks very plausable for our case as well. Thank you!

[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.

[d0whc3r]

same issue here can't reproduce in a small repo but in my "big" repo, if I comment server.listen() and all handlers jest.mock works as expected, otherwise it only works if the jest.mock is in the same file of server.listen()