Can't get addon to work. Using react-query v4 and nextjs about msw-storybook-addon HOT 7 CLOSED

Got it working, instead of using mswLoader, I'm now using mswDecorator. Not sure why.

from msw-storybook-addon.

That's great! Thank you for reporting back. I will be closing this issue, let me know if this happens again.

from msw-storybook-addon.

Thank you!

from msw-storybook-addon.

I'm having issues too. made it work with this workaround: #119 (comment)
But I can't define handlers for each Story.
Did you have any luck?

from msw-storybook-addon.

Hey @conradogarciaberrotaran and @Mexflubber thanks for reporting this.
The mswLoader is the recommended way to use the addon because it avoids possible flakiness, as the decorator only runs as the story is rendering, while the loader runs before the story renders. But the mswLoader waits for the msw promise to resolve, and it seems like it never resolves for you. Could you please share a reproduction? That will make it much easier for me to understand what's going on and to provide a fix for it.

from msw-storybook-addon.

Thank you @yannbf , I've just tried to replicate the issue, basically I ran:

npx create-next-app@latest msw-storybook-issue --use-npm
npx storybook@latest init
npm i msw msw-storybook-addon -D
npx msw init public/

Added the public route of my nextjs to the staticDirs in main.js and added this story:

import { rest } from 'msw';
import { useEffect, useState } from 'react';

const SomeComponent = () => {
  const [response, setResponse] = useState(null);
  useEffect(() => {
    fetch("/api/some-endpoint")
      .then((response) => response.json())
      .then((data) => setResponse(data));
  }, []);

  return <div>{response?.firstName}</div>;
};


export default {
  title: 'Example/SomeComponent',
  component: SomeComponent,
};

export const Something = {
  parameters: {
    msw: {
      handlers: [
        rest.get('/api/some-endpoint', (req, res, ctx) => {
          return res(
            ctx.json({
              firstName: 'Neil',
              lastName: 'Maverick',
            })
          )
        }),
      ]
    },
  }
};

export const SomethingElse = {
  parameters: {
    msw: {
      handlers: [
        rest.get('/api/some-endpoint', (req, res, ctx) => {
          return res(
            ctx.json({
              firstName: 'bob',
              lastName: 'Maverick',
            })
          )
        }),
      ]
    },
  }
};

And it's working correctly.
I'm not able to reproduce it. I will try updating the versions on my project to see if the issue is fixed.

from msw-storybook-addon.

Updating the libraries fixed my issue, I updated msw, storybook and msw-storybook-addon to latest

from msw-storybook-addon.