Using MSW for both server-side and client-side request mocking

[thepuzzlemaster]

I've followed the example here for setting up MSW on my nextjs project. I'm using MSW in my cypress integration test.

The initial page load, requests data via GetServerSideProps, which is correctly intercepted by MSW. However, when I trigger subsequent API calls via interacting with the page in my test, they are not intercepted, because only the server-side service worker ever gets set up. The client-side one doesn't.

I'm not sure if I'm doing something incorrect on my end, or if it's a flaw in the example code, or if this functionality is even possible to achieve.

As a test, I added the require() call within a React.useEffect() so it only runs client-side. But it still doesn't seem to setup MSW correctly, or at least none of my calls get intercepted. Even when the exact same API call happens server-side and client-side, only the one happening server-side gets intercepted by MSW.

Has anyone successfully got this up and running?

[thepuzzlemaster]

Found a nice tutorial here, which helped me realize I had forgotten to run npx msw init ./public, so the service worker wasn't accessible to my front-end code. I'll probably create a PR to add that to the example docs, as it's not mentioned there.

[yashboura303]

[thepuzzlemaster]

Hey @yashboura303. Unfortunately this is so long ago, and I ended up removing cypress from my project entirely that I've lost the context for how I was able to accomplish this. I do recall that I really only called getServerSideProps(), so I'm not sure if that functions differently from getInitialProps()?