Match by HTTP Header

[donaldpipowitch]

Scope

Adds a new behavior

Compatibility

• This is a breaking change

Feature description

There is a great official Storybook plugin for MSW (msw-storybook-addon), but it doesn't support sophisticated documentation of multiple stories (which use the same endpoints) within the same page.

This could be fixed on a architecture level (isolating every Story within in an iframe with independent workers), but imho it can be fixed in a simpler way similar to how CSS-in-JS usually fixed "global CSS" (by a proper "scoping" concept).

I'm a new MSW user and if I saw correctly it is currently only possible to match by method and URL. It would actually be nice to match by HTTP Headers as well. It would be pretty easy to append a Story-specific unique HTTP Header to every request. If this would be the case I could easily match against it. With more sophisticated matching options we could support mswjs/msw-storybook-addon#83 in user land.

export const Example1: Story = {
  parameters: {
    msw: {
      handlers: [
        rest.get(
          {
            path: '/example',
            headers: {
              'x-msw-mock': 'example-1',
            },
          },
          (req, res, ctx) => {
            return res(ctx.json('Hello'));
          }
        ),
      ],
    },
  },
};

export const Example2: Story = {
  parameters: {
    msw: {
      handlers: [
        rest.get(
          {
            path: '/example',
            headers: {
              'x-msw-mock': 'example-2',
            },
          },
          (req, res, ctx) => {
            return res(ctx.json('World'));
          }
        ),
      ],
    },
  },
};

There's definitely room for improving the API (e.g. by providing a rest that is already scoped):

export const Example1: Story = {
  parameters: {
    msw: {
      scope: 'example-1',
      handlers: ({ rest }) => [
        rest.get('/example', (req, res, ctx) => {
          return res(ctx.json('Hello'));
        }),
      ],
    },
  },
};

export const Example2: Story = {
  parameters: {
    msw: {
      scope: 'example-2',
      handlers: ({ rest }) => [
        rest.get('/example', (req, res, ctx) => {
          return res(ctx.json('World'));
        }),
      ],
    },
  },
};

In our application code we would need to access this scope (e.g. via a React hook) and append it to all requests (e.g. in an Axios interceptor, if you use Axios).