N-LAB

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

投稿日: 2024年11月30日


目標

※この記事ではフレームワークはNuxt.jsを使用しています。

条件

https://n-laboratory.jp/articles/nuxt3-storybook8

・Nuxt.js: 3.14.159
・Storybook: 8.4.4
・msw: 2.6.5
・msw-storybook-addon: 2.0.4

目次

  1. MSWのインストール
  2. MSWの有効化
  3. MSWを利用したAPIのモック実装
  4. Warnログの抑制


MSWのインストール

1. MSWとmsw-storybook-addonをインストールします。

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

※msw-storybook-addonはStory単位でモックリクエストの制御ができるライブラリです。詳細は以下を参照ください。
https://storybook.js.org/addons/msw-storybook-addon

2. 以下のコマンドを実行します。

$ npx msw init public/

※publicディレクトリにmockServiceWorker.jsが自動生成されます。

MSWの有効化

1. .storybook/preview.tsに以下を追加して保存します。

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

// 追加
initialize()

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

export default preview


2. .storybook/main.tsのstaticDirsにmockServiceWorker.jsが存在するディレクトリ（ここではpublic）を指定します。

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


MSWを利用したAPIのモック実装


1. pages/index.vueを作成して以下の内容で保存します。

// 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>

※Get uuidボタンをクリックすると、APIでUUIDを取得して画面に表示します。

2. stories/index.stories.tsを作成して以下の内容で保存します。

// 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


3. 以下のコマンドを実行してStorybookを起動します。

$ npm run storybook


4. 以下のURLにアクセスします。DefaultのStoryが表示されていることを確認します。
http://localhost:6006/?path=/story/index--default
dashboard
5. Get uuidボタンをクリックします。UUID = test uuidと表示されることを確認します。
get uuid

Warnログの抑制

 [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'
})

※onUnhandledRequestの詳細は以下を参照ください。
https://mswjs.io/docs/api/setup-worker/start#onunhandledrequest

以上で全ての手順は完了になります