Support request: solving catch-22 of using MSW with Storybook as source for Cypress test

[cellog]

Hello, please redirect if there is a proper forum or other support mechanism I missed, thank you.

I am trying to implement MSW inside our application. Currently we use Storybook as the source for integration tests using Cypress. As such, many existing tests use request mocking to intercept requests, mock the responses, and then test. Because this is an application, we have some components that make network requests on startup.

I have 3 goals with introducing MSW:

1. stop making network requests that will fail in a user-facing storybook
2. allow Cypress to tweak the network requests as needed to exercise full functionality of components
3. be able to slowly migrate tests from the old Cypress mocking to MSW mocking instead

The first point is solved by introducing msw and msw-storybook-addon, but the second point results in a conundrum. I need to be able to intercept requests before the page loads, but Cypress won't have access to the msw on window until the page has actually loaded, which introduces a race condition.

What do you think is the best approach here?

There are a couple of ways I can imagine to solve this:

migrate all cypress mocking to MSW mocking

Instead of mocking in Cypress, instead create separate storybook stories for each scenario and use these as the source for each cypress test. Long-term this is the solution I want to use

The drawback: it's going to be a huge pull request, and migration becomes much trickier since we can't spread it out over time, and have to do it all at once.

Figure out some way to properly intercept MSW and turn off mocking

I tried

cy.visit(<storybook url>);
cy.window().then((window) => {
  window.msw.worker.stop();
});

This turned off mocking, but then something (probably storybook) turned it right back on, and the browser hung because MSW was looking for handlers that no longer existed and I had to force quit it. Yikes.

???

What do you think? Is my only real option the ginormous pull request option?

[kettanaito]

Hey, @cellog. Thanks for reaching out.

Let me start by saying that integration with various tools is still an area we're actively exploring, and developers come up with great approaches to their problems and share them with us so they can become a common practice. That being said, I'll try to recommend to you how to approach MSW setup in your circumstances.

Clarifications

First, I'd like to learn more about your usage.

I need to be able to intercept requests before the page loads

What makes these requests, if it's not your application? No page load means no JavaScript downloaded, parsed, and executed. Is it your testing setup? Please, share the code that makes these requests, it'll help me understand your usage better..

Suggestion

Can you achieve what you want by introducing mocks in the msw-storybook-addon?

The load order of the stories would then be:

Storybook -- MSW addon --> Story --> Cypress (navigating to the story)

The add-on should integrate with your story so that the requests happening on the initial page load are also intercepted.

[cellog]

hi, thanks for the quick reply. The basic issue is that the request in question is made by the component on load in storybook. I need to intercept before Story loads msw.

The cypress test will not have access to window.msw until after the storybook story loads, and after the component fires off its initial request to retrieve data. Unless I am mistaken?

What I am looking for is a way to pre-specify the mocks to load, perhaps through URL parameters that the msw addon can map to specific route interceptors or something along those lines?

We use this pattern to trigger knobs to change behavior of stories so we don't have to write a zillion storybook stories just for testing purposes.

An example component: the media library component fires off a request to the server to load the list of images/fonts available for use.

So, your suggestion would partially work for us, yes.