offbeat-dev / storybook-msw-addon

An MSW (Mock Service Worker) addon including a control panel that enables interaction and manipulation of mock requests within Storybook.
https://storybook-msw-addon.vercel.app
MIT License
25 stars 5 forks source link

msw option is not available in add-on panel #1

Closed shrilakshmishastry closed 8 months ago

shrilakshmishastry commented 1 year ago

Not getting MSW on add on panel as shown in the example in storybook, even after passing proper params. Mocking is working fine

image

code for preview.js

initialize();
export const loaders = [mswLoader];
addParameters({
  viewport: {
    viewports: {
      ...INITIAL_VIEWPORTS,
      ...MINIMAL_VIEWPORTS,
    },
  },
});

code for story

import React from 'react';
import { rest } from 'msw';
import Dummy from './dummy';

export default {
  title: 'Dummy/fetch',
  component: Dummy,
  parameters: {
    msw: {
      handlers: [
        rest.get(
          'https://api.smallcase.com/smallcases/hello',
          (req, res, ctx) => {
            console.log('lakshmi');
            return res(
              ctx.json({
                firstName: 'Neil',
                lastName: 'Maverick',
              }),
            );
          },
        ),
      ],
    },
  },
};

const Template = () => <Dummy />;
export const fetch = Template.bind({});
offbeat-dev commented 1 year ago

hi @shrilakshmishastry have you added 'storybook-msw-addon' to the addons list in storybook's main.ts? if that doesn't work, can you share a repo or codesandbox reproducing the issue so I can take a look? thank you

shrilakshmishastry commented 1 year ago

Hey, thanks for the quick come back !! Yes , I have added storybook-msw-addon in main.js. I can't share repo it's organisation one and private, But I can share the version of repos I am using

"@storybook/react": "^6.5.16" "@storybook/addon-actions": "^6.5.16", "@storybook/addon-docs": "^6.5.16", "@storybook/addon-essentials": "^6.5.16", "@storybook/addon-knobs": "^6.4.0", "@storybook/addon-viewport": "^6.5.16", "@storybook/builder-webpack5": "^6.5.16", "@storybook/manager-webpack5": "^6.5.16", "@storybook/preset-create-react-app": "^4.1.2", "@storybook/preview-api": "^7.3.0", "storybook-msw-addon": "^0.3.21", "msw": "^1.2.3", "msw-storybook-addon": "^1.8.0"

Is this supported for storybook react ?
shrilakshmishastry commented 1 year ago

is there any other dependency I should be adding along with this library?

offbeat-dev commented 1 year ago

hi @shrilakshmishastry I see, I think it has too do with the fact that I built the library using the addon-kit for Storybook > 7 which uses vite instead of webpack.. I haven't tested it with webpack builder. Any chance you can upgrade your storybook to vite?