How to mock useFetch responses?

[juw177]

I understand this may not be a storybook nuxt question but the msw addon (https://github.com/mswjs/msw-storybook-addon) only seems to work for client side requests. When useFetch is called at the top setup block the addon is not able to intercept it. What is the recommended approach to mocking the api call?

Thank you, any advice appreciated.

[AndrewBogdanovTSS]

I agree that providing an example of msw usage would be highly beneficial since most Nuxt components use data fetching one way or another

[hacknug]

What I usually do is document components that are strictly presentational. On my stories I import a JSON with placeholder content for the component and pass it in as args. I try to only fetch data in pages or components whose only responsibility is fetching the data and maybe transforming it.

Try moving these calls outside of your components if it makes sense for your project. By doing this you'll be able to make changes to what and how you fetch without the need to make changes to your components.

I know this doesn't answer your question but I thought it might help you work around the issue in the meantime.

[shilman]

@tobiasdiez I tried to get this working in a fresh project (based on Nuxt Examples) and ran into various issues described in the project README. Would you mind taking a look? MSW appears to be mocking the network request, but the component rendering is borked. I don't know how much of it is due to problems with the Storybook Nuxt framework, and how much is due to user error on my part! https://github.com/shilman/nuxt-data-fetching

[shilman]

Possibly relevant, though it looks like MSW is mocking the network request mswjs/msw#2215

I also tried updating stories for TheQuote.vue to use this approach, but it doesn't seem to do anything https://medium.com/@bimasenaputra/how-to-mock-usefetch-composables-in-nuxt-eca224f53011

[AndrewBogdanovTSS]

@shilman I don't think that mswjs/msw#2215 is still relevant. My team was able to get MSW working in nuxt-storybook, but what we face are some intermittent service worker failures that result in 404 error crashes, which can appear randomly even with no navigation from the user side, which looks very weird. If the user refreshes the page, Storybook starts to work fine again. I suppose, if 2215 was relevant, MSW wouldn't run at all and would result in a consistent error.
MSW also works fine for us when using with nuxt-test-utils

[shilman]

@AndrewBogdanovTSS Nice!!! You're evidently several steps ahead of me. I came to the same conclusion after more messing around, but unlike you I still don't have a working example. Are you using the MSW addon? It contains this snippet of code that waits for the service worker to be ready:

https://github.com/mswjs/msw-storybook-addon/blob/main/packages/msw-addon/src/initialize.browser.ts#L27-L30

If you don't wait for that, then you can run into race conditions where the story renders but MSW is still getting initialized.

[AndrewBogdanovTSS]

@shilman but isn't the msw-storybook-addon already waiting for this promise? https://github.com/mswjs/msw-storybook-addon/blob/main/packages/msw-addon/src/loader.ts#L6
Does Storybook wait for all addons to resolve?

[shilman]

@AndrewBogdanovTSS Indeed. It's also possible to use MSW without using the addon, and in that case you can run into this race condition. If you're already using the addon then it must be something else. Looping in @yannbf who may have other ideas for why MSW might fail intermittently.

[yannbf]

@shilman I don't think that mswjs/msw#2215 is still relevant. My team was able to get MSW working in nuxt-storybook, but what we face are some intermittent service worker failures that result in 404 error crashes, which can appear randomly even with no navigation from the user side, which looks very weird. If the user refreshes the page, Storybook starts to work fine again. I suppose, if 2215 was relevant, MSW wouldn't run at all and would result in a consistent error. MSW also works fine for us when using with nuxt-test-utils

Hey there! I've noticed a few times that even with the mechanism to wait for MSW to be ready, there are some moments where it doesn't work as intended. Once refreshing, the problem is gone and if I'm not mistaken, it won't appear again unless you nuke node_modules. It happened a couple times when I made demos 😬

If this happens more consistently for you, can you share a reproduction?

[AndrewBogdanovTSS]

If you're already using the addon then it must be something else

@shilman yes, we are using an addon

Yes, it happens more consistently, even in the deployed version of the Storybook. It's happening in the private repo, but I will look if I can prepare an isolated repro

[tobiasdiez]

Not sure about msw, but nuxt-test has built in facilities for mocking requests: https://nuxt.com/docs/4.x/getting-started/testing#registerendpoint. Maybe that's easier to reuse (or perhaps re-implement here in the storybook module) then msw?