投稿日: 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と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が自動生成されます。
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
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
5. Get uuidボタンをクリックします。UUID = test uuidと表示されることを確認します。
[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
以上で全ての手順は完了になります