Nuxt 3 × Storybook 8 にMSWの2系を導入する

$ npm install --save-dev msw msw-storybook-addon

$ npx msw init public/

// .storybook/preview.ts
import { initialize, mswLoader } from 'msw-storybook-addon'

// 追加
initialize()

const preview: Preview = {
  // 追加
  loaders: [mswLoader],
}

export default preview

// .storybook/main.ts
const config: StorybookConfig = {
  staticDirs: ['../public'],
}
export default config

// pages/index.vue
<script lang="ts" setup>
import { useFetch } from '@vueuse/core'

const uuid = ref('')
const handleClick = async () => {
  // APIでUUIDを取得
  const { data } = await useFetch('https://httpbin.org/uuid').json()
  uuid.value = data.value.uuid
}
</script>

<template>
  <div>
    <button @click="handleClick">Get uuid</button>
    <p>UUID = {{ uuid }}</p>
  </div>
</template>

// stories/index.stories.ts
import type { Meta, StoryObj } from '@storybook/vue3'
import { http, HttpResponse } from 'msw'
import Index from '../pages/index.vue'

type Story = StoryObj<typeof Index>

const meta: Meta<typeof Index> = {
  title: 'Index',
}

export const Default: Story = {
  render: () => ({
    components: { Index },
    template: '<Index />',
  }),
  parameters: {
    msw: {
      handlers: [
        http.get('https://httpbin.org/uuid', () => {
          return HttpResponse.json({
            // APIの戻り値をtest uuidに固定
            uuid: 'test uuid',
          })
        }),
      ],
    },
  },
}

export default meta

$ npm run storybook

 [MSW] Warning: intercepted a request without a matching request handler:
  • GET /pages/index.vue
If you still wish to intercept this unhandled request, please create a request handler for it.
Read more: https://mswjs.io/docs/getting-started/mocks

// .storyboox/preview.ts
import { initialize } from 'msw-storybook-addon';

initialize({
  onUnhandledRequest: 'bypass'
})