search

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

[Feature] Provide mockServiceWorker automatically #54

Closed groupsky closed 3 years ago

groupsky commented 3 years ago

Currently the installation instructions ask to use the msw cli that copies the service worker to the public folder, but that seems to pollute the folder and does not allow for future updates. Instead I think it should be possible to tap into storybook's build/server and provide the mock file automatically.

I haven't investigated the build process, but at least when using the storybook server a middleware can do the trick.

kettanaito commented 3 years ago

Hey, @groupsky. Thanks for the suggestion.

but that seems to pollute the folder and does not allow for future updates

Could you elaborate more on these two points?

The worker script is your file, there's no pollution here. You may ignore it in VCS if you follow my suggestion below.

If you configure msw.workerDirectory property in your package.json, whenever you install msw it will automatically re-generate the worker script at the specified path. This ensures that the library and its worker are compatible when upgrading/downgrading.

That being said, if there's an easier way to ensure reproducible worker script content using Storybook hooks, I'd love to hear more about it. Feel free to provide us with any appropriate hooks you find fit for the task. Thanks.

groupsky commented 3 years ago

but that seems to pollute the folder and does not allow for future updates

Could you elaborate more on these two points?

I said pollute as the folder is being deployed in production (shared with the main next.js in my case) and the service worker is not needed in that environment even if not installed.

Also being generated only on first install and then bundled in the VCS (as was my understanding) seems that the content is frozen and if future update of msw requires new or changed behavior from the sw that will not be automatically handled by just upgrading and will likely lead to some hard to trace issues.

The worker script is your file, there's no pollution here. You may ignore it in VCS if you follow my suggestion below.

It's not really my file, as it's purpose is to enable the msw functionality in browser - it's not like I'm going to extend it, or use it for anything else, and it does need to match msw api.

If you configure msw.workerDirectory property in your package.json, whenever you install msw it will automatically re-generate the worker script at the specified path. This ensures that the library and its worker are compatible when upgrading/downgrading.

I did miss this option and it does solve my main problem. :+1:

That being said, if there's an easier way to ensure reproducible worker script content using Storybook hooks, I'd love to hear more about it. Feel free to provide us with any appropriate hooks you find fit for the task. Thanks.

I haven't looked for the appropriate hooks, but seeing what other plugins are able to perform, seems like a possibility.

For me this ticket is resolved with your reference to configure msw.workerDirectory property - I removed and ignored in VCS the service worker and it is generated every time msw is installed..