Nuxt3＋MockServiceWorker(msw)でMock

Nuxt3でAPI部をMockする方法

Nuxt2+axiosの頃はaxiosMockServerを利用していたが、
Nuxt3からはAPIアクセスはNuxt腹持ちのuseFetch、$fetchを利用することが推奨になってしまったため、Mockの方法を模索する必要があった。

• API単位でMockファイルを分けたい
• developmentの場合だけ有効にしたい

などのもともとの使い勝手に近くなるようなイメージで配置したのでメモ。
ただし、この方法が使えるのはSPAモードだけ。。。
(SSRの場合Node18以上だとfetchがnodejs側の仕様とぶつかってmswが動かないとのこと)

サンプルはテスト用ダミーデータを返してくれる無料APIサイトを利用。
https://jsonplaceholder.typicode.com/
試したVersionは
"nuxt": "^3.11.2"
"msw": "^2.2.14"

手順とか配置とか

• mswインストール

npm install msw@latest --save-dev

• service-wokerファイルをpublicディレクトリ配下に作成(おまじない)

npx msw init public

• Mockファイル作成
  mocksディレクトリを掘ってapi単位でMock応答ファイルを作成(以下だとtodos.js、users.js)
  MockファイルをまとめてWokerをExportするmockWokers.jsを作成
  

users.js

import { http, HttpResponse } from 'msw'
 
export const users = [
  // InterceptするURL、ここはBASEURLとかを考慮して隠蔽する実装にしたほうがよさそう
  http.get('https://jsonplaceholder.typicode.com/users', () => {
    // Mock応答
    return HttpResponse.json({
      id: 'mockUserID',
      firstName: 'John',
      lastName: 'Maverick',
    })
  }),
]

mockWokers.js

import { setupWorker } from 'msw/browser'
import { users } from '~/mocks/api/users'
import { todos } from '~/mocks/api/todos'

// woker作成
const worker = setupWorker()
// Mockデータ設定
worker.use(...users)
worker.use(...todos)

export {worker}

• Mock有効化
  pluginsにMock有効化処理を追加し、Nuxtインスタンス生成時にMockの有効無効制御をおこなう
  

01_mock.js

import { worker } from '~/mocks/mockWorker'

export default defineNuxtPlugin((NuxtApp) => {
// MOCKモードだったら。developmentだったら。とかで設定し分ける
worker.start({onUnhandledRequest: 'bypass'}) 
})

• 利用イメージ

.vue

<template>
    <div>
        <button @click="getUser">getUser</button>
        <hr>
        {{ users }}
    </div>
</template>
<script setup>
const users = ref({})
const getUser = async () => {
    users.value = await $fetch('https://jsonplaceholder.typicode.com/users')
}
</script>

Mockで設定したデータが応答することを確認