The last declared handler is applied to all stories in a file.

[neldeles]

I'm trying to use the MSW add-on with React Query. Am experiencing an issue wherein the last declared handler is what's used for all stories in a file.

// LoginForm.stories.tsx
import { LoginForm } from ".";
import { Meta, Story } from "@storybook/react";
import { rest } from "msw";

export default {
  title: "components/molecules/LoginForm",
  component: LoginForm,
  decorators: [
    (Story) => (
      <div className="flex flex-col justify-center py-12 sm:px-6 lg:px-8 min-h-screen bg-gray-50">
        <Story />
      </div>
    ),
  ],
  parameters: {
    // opt out of decorators rendering in code preview
    docs: {
      source: {
        type: "dynamic",
        excludeDecorators: true,
      }
    },
  },
} as Meta;

const Template: Story = () => <LoginForm />;

export const MockedDefault = Template.bind({});
MockedDefault.parameters = {
  msw: [
    // Loading state
    rest.post("/auth/login", (req, res, ctx) => {
      return res(ctx.delay(1000 * 60 * 60 * 60), ctx.status(200));
    }),
  ],
};

export const MockedError = Template.bind({});
MockedError.parameters = {
  msw: [
    // Error state
    rest.post("/auth/login", (req, res, ctx) => {
      return res(
        ctx.status(400),
        ctx.json({ message: "Incorrect email and/or password. xxxxx" })
      );
    }),
  ]
};

The "Error state" handler is what's applied to all stories in the file. If I swap "Loading state" and "Error state", it's the "Loading state" that's applied to all stories in the file. As an additional check, I changed the endpoint of MockedDefault's handler to some/other/endpoint, I still receive the response from the "Error state" handler. My assumption is MockedDefault should throw an error, since the story has an unhandled request?

This is what my .storybook/preview.js looks like:

import "../src/index.css";
import { BrowserRouter as Router } from "react-router-dom";
import { QueryClient, QueryClientProvider } from "react-query";
import { initialize, mswDecorator } from "msw-storybook-addon";

// Initialize MSW
initialize();

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  options: {
    storySort: {
      order: ["Introduction", ["Intro", "Installation"], "components"],
    },
  },
  layout: "fullscreen",
};

const queryClient = new QueryClient();

export const decorators = [
  mswDecorator,
  (Story) => (
    <QueryClientProvider client={queryClient}>
      <Router>
        <Story />
      </Router>
    </QueryClientProvider>
  ),
];

Packages:

Package	Version
MSW	0.35.0
msw-storybook-addon	1.4.1
storybook/react	6.3.12
react-query	3.33.1

[neldeles]

I changed nothing with my code. Only thing I did was update to Storybook to 6.4.7 and msw-storybook-addon to 1.5.0 and issue has been resolved.

[solace]

For anyone else who encounters this, it took me too long to realise that this works fine when you're looking at the individual canvases but not when you're looking at them all at once on the Docs tab.