BREAKING CHANGE: Support MSW 2.0

[yannbf]

Issue: #121

Release notes

MSW required version is now ^2.0.0

The addon now requires your MSW version to be 2.0.0 or higher. This means you will have to change the format of your handlers as well. More info on how to migrate to MSW 2.0.0: https://mswjs.io/docs/migrations/1.x-to-2.x/

mswDecorator is deprecated in favor of mswLoader

Using MSW in a decorator worked for most scenarios, but there's a slight chance the service worker will not get registered in time. As a result, a story that requests data might actually request real data. Since v1.7.0, this addon provided a mswLoader to use instead of the mswDecorator. Loaders get executed before a story renders, differently than decorators, which execute as the story renders.

Please replace your mswDecorator with mswLoader, as the mswDecorator will be removed in the next major release. It works the same, respecting the parameters you set, so there's no need to change anything else in your codebase.

// .storybook/preview.js
-import { initialize, mswDecorator } from 'msw-storybook-addon'
+import { initialize, mswLoader } from 'msw-storybook-addon'

initialize()

const preview = {
-  decorators: [mswDecorator]
+  loaders: [mswLoader]
}

export default preview

parameters.msw Array notation deprecated in favor of Object notation

Since v1.5.0, this addon started supporting the parameters.msw.handlers object format instead of using parameters.msw as an Array. This change was done to follow convention for Storybook addon parameters, but also allows for more advanced usage and make the addon more future proof for upcoming features. You can find more information here.

Please migrate to this format, and the previous format will be removed in the next major release.

// ❌ Instead of defining the msw parameter like so:
export const MyStory = {
  parameters: {
    msw: [...] // some handlers here
  }
}

// ✅ You should set them like so:
export const MyStory = {
  parameters: {
    msw: {
      handlers: [...] // some handlers here
    }
  }
}
// ✅ Or like so:
export const MyStory = {
  parameters: {
    msw: {
      handlers: {
        someHandlerName: [...] // some handlers here
      }
    }
  }
}

📦 Published PR as canary version: 2.0.0--canary.122.133be34.0

✨ Test out this PR locally via:

npm install msw-storybook-addon@2.0.0--canary.122.133be34.0
# or 
yarn add msw-storybook-addon@2.0.0--canary.122.133be34.0

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
msw-storybook-addon	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 16, 2024 0:35am

[jakubriedl]

Thanks @yannbf for your great work,
I've tested the canary release in our (quite big) setup and it seems to work great. Is there something I can help with to get this finished and released?

[filiphazardous]

I'd like to add my thanks. I also use the canary in our (smaller) setup. Works nicely with our graphql calls!

[csantos1113]

Hey @yannbf thanks for your work getting this released.

It works nicely for Storybook in the browser, but I'm unfortunately facing a similar issue to the one you have in https://github.com/mswjs/msw-storybook-addon/actions/runs/6625684339/job/17997112847?pr=122 😢

jest + storybook composeStories

[the-ult]

Would it be an idea to combine forces? With @offbeat-dev ?

https://github.com/offbeat-dev/storybook-msw-addon

[kettanaito]

@the-ult, that would be amazing! I have a chat with them on Discord but haven't got to reply just yet. Been extremely busy couple of weeks. Will get back to the convo and, hopefully, we will make the add-on even better.

[kettanaito]

🚀