[Bug] Context leak when using msw with multiple stories in the same file

[sneko]

Describe the bug

Let's say in the same file I have StoryA and StoryB both using msw to mock API calls. They use the same underlying component that fetches data.

I was doing some advanced mocking with msw to delay some requests but I figured out the initial call from StoryA was leaking over StoryB handlers (I was able to differentiate them because I forced them using different inputs for their requests).

In my example I wanted on StoryB to count the number of requests done to delay the response differently, it appears instead of receiving 2 calls as expected, I received 3 (the extra one was from StoryA and was the first received).

I spent hours trying to debug everything, trying to use manually msw.resetHandlers() everywhere where I could but it didn't change anything, trying to set maxWorkers=1...

Maybe it's related to my setup but I found a workaround, in the test runner hook preRender(), just waiting for the context to be ready remove all the leakage. Just using inside /.storybook/test-runner.js:

const { getStoryContext } = require('@storybook/test-runner');

module.exports = {
  setup() {},
  async preRender(page, context) {
    // This is the workaround
    await getStoryContext(page, context);
  },
  async postRender(page, context) {},
};

While debugging I ended using headless: false to see what happened, it seems between each .stories.jsx the browser for testing is totally relaunched, but for multiple stories inside the same .stories.jsx the browser is reused. Maybe something is going too fast? Or in a sense the parameters are merged and I end up with the same msw handlers for both the stories?

(sorry for not providing a reproductible repository)

Hope it helps 👍