Not catching API as expected

[kazu-2020]

Hi there! Thanks for the add-on! 👍🏻

I want to catch "/contractors/achievement" in msw, but it returns a 404 error 😱

At this stage, the logs confirm that msw is running.

package's version

package	version
msw	1.2.2
msw-storybook-addon	1.8.0
vite	4.3.2
storybook/react	7.1.0-alpha.26
storybook/react-vite	7.1.0-alpha.26

Current Implementation

.storybook/main.ts

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-mdx-gfm",
    "@storybook/addon-backgrounds",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  staticDirs: ["../public"],
};

export default config;

preview.tsx

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactNode } from "react";
import { initialize, mswLoader } from "msw-storybook-addon";
import { MemoryRouter, Route, Routes } from "react-router-dom";

import type { Preview, Decorator } from "@storybook/react";

const mockedQueryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
    },
  },
})

export function MockedQueryProvider({ children }: QueryProviderProps) {
  return (
    <QueryClientProvider client={mockedQueryClient}>
      {children}
    </QueryClientProvider>
  );
}

// Intialize MSW
initialize({});

export const decorators: Decorator[] = [
  (Story) => (
    <Theme>
      <Story />
    </Theme>
  ),
  (Story) => (
    <MockedQueryProvider>
      <MemoryRouter>
        <Routes>
          <Route path="/" element={<Story />} />
        </Routes>
      </MemoryRouter>
    </MockedQueryProvider>
  ),
];

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    loaders: [mswLoader],
  },
};

export default preview;

Sample.stories.tsx

import { rest } from "msw";

import { RankCard } from "./RankCard";

import type { Meta, StoryObj } from "@storybook/react";

const meta = {
  component: RankCard,
  parameters: {
    msw: {
      handlers: [
        rest.get(`/contractors/achievement`, (req, res, ctx) => {
          return res(ctx.status(200));
        }),
      ],
    },
  },
} satisfies Meta<typeof RankCard>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {};

[binomialstew]

Not sure if this will help you, but I had a similar issue—turns out I had the mswLoader in parameters.loaders instead of loaders. I misread the config: https://github.com/mswjs/msw-storybook-addon#configure-the-addon

[kazu-2020]

@binomialstew thanks!!