mswjs / msw-storybook-addon

Mock API requests in Storybook with Mock Service Worker.
https://msw-sb.vercel.app
MIT License
408 stars 39 forks source link

Problems with SB7: 404s on mocked calls and mockServiceWorker.js retrieval #104

Closed stem-ui closed 1 year ago

stem-ui commented 1 year ago

I had msw-storybook-addon working with SB6 and am trying to upgrade to SB7. I used Storybook's automigrate, npx storybook@next automigrate and upgraded to the latest version of this addon:

// package.json
"devDependencies: {
  "msw-storybook-addon": "^1.8.0", // previously 1.7.0
  "storybook": "^7.0.0-rc.3", // previously 6.5
},
"msw": {
  "workerDirectory": ".storybook/public" // unchanged
},

The following setup results in 404 on mocked calls from stories that were previously working, as well as a 404 when trying to retrieve the mockServiceWorker.js

// preview.ts
const preview = {
  decorators: [mswDecorator],
}

The following setup results in a 404 for http://localhost:6006/mockServiceWorker.js. The mocked calls are not attempted.

// preview.ts
const preview = {
  loaders: [mswLoader],
}
TypeError: Failed to update a ServiceWorker for scope ('http://localhost:6006/') with script ('http://localhost:6006/mockServiceWorker.js'): A bad HTTP response code (404) was received when fetching the script.

Storybook info:

npx storybook info

Environment Info:

  System:
    OS: macOS 12.5.1
    CPU: (10) x64 Apple M1 Pro
  Binaries:
    Node: 16.15.1 - ~/.nvm/versions/node/v16.15.1/bin/node
    npm: 9.4.1 - ~/.nvm/versions/node/v16.15.1/bin/npm
  Browsers:
    Chrome: 111.0.5563.64
    Firefox: 109.0.1
    Safari: 15.6.1
  npmPackages:
    @storybook/addon-actions: ^7.0.0-rc.3 => 7.0.0-rc.3 
    @storybook/addon-docs: ^7.0.0-rc.3 => 7.0.0-rc.3 
    @storybook/addon-essentials: ^7.0.0-rc.3 => 7.0.0-rc.3 
    @storybook/addon-interactions: ^7.0.0-rc.3 => 7.0.0-rc.3 
    @storybook/addon-links: ^7.0.0-rc.3 => 7.0.0-rc.3 
    @storybook/addon-mdx-gfm: ^7.0.0-rc.3 => 7.0.0-rc.3 
    @storybook/react: ^7.0.0-rc.3 => 7.0.0-rc.3 
    @storybook/react-webpack5: ^7.0.0-rc.3 => 7.0.0-rc.3 
    @storybook/testing-library: ^0.0.14-next.1 => 0.0.14-next.1 
stem-ui commented 1 year ago

My bad, somehow I lost the staticDirs config in my Storybook config while I was converting a bunch of files to typescript. Restored it and things are working fine now with the new mswLoader