セットアップ

こちらに書いてある内容でほぼ行けたが、注意点が1つ

モックするURLは、バックエンドへのAPIのオリジンが異なる場合は絶対パスで書く

個人的な好みで、バックエンドのオリジンはLocalhostであってもポートを分けているため、以下のように書く

import { rest } from 'msw'

export const handlers = [
  rest.post('https://localhost/login', (req, res, ctx) => {
    // Persist user's authentication in the session
    sessionStorage.setItem('is-authenticated', true)
    return res(
      // Respond with a 200 status code
      ctx.status(200)
    )
  }),
  rest.get('https://localhost/user', (req, res, ctx) => {
    // Check if the user is authenticated in this session
    const isAuthenticated = sessionStorage.getItem('is-authenticated')
    if (!isAuthenticated) {
      // If not authenticated, respond with a 403 error
      return res(
        ctx.status(403),
        ctx.json({
          errorMessage: 'Not authorized',
        })
      )
    }
    // If authenticated, return a mocked user details
    return res(
      ctx.status(200),
      ctx.json({
        username: 'admin',
      })
    )
  }),
]

meijin

ServiceWorkerを置く場所

$ npx msw init src/static --save

ここにNuxtの記載がなくて草も生えないが、staticディレクトリでOK

meijin

TypeScript対応

どこかにあった気がするが見逃した

meijin

import { rest } from 'msw'

// Describe the shape of the "req.body".
interface UpdatePostRequestBody {
  title: "string"
  viewsCount: string
}

// Describe the shape of the mocked response body.
interface UpdatePostResponseBody {
  updatedAt: Date
}

// Describe the shape of the "req.params".
interface UpdatePostRequestParams {
  postId: string
}

rest.update
  <UpdatePostRequestBody, UpdatePostResponseBody, UpdatePostRequestParams>(
  '/post/:postId',
  (req, res, ctx) => {
    const { postId } = req.params
    const { title, viewsCount } = req.body

    return res(
      ctx.json({
        updatedAt: Date.now()
      })
    )
  })

meijin

第一感

途中から導入となると、全APIをモックしなければ使えないのでちょっとしんどい？
ということで、コンポーネント単位で導入するとか・・・？ページ単位で導入していく、となる？

meijin

第二感

ローカル開発で日頃から使う用途は途中から導入するのがしんどい
しかしStoryBookとか、コンポーネント単位のテストにおいてはかなり有力？

そっちの筋を追うか

meijin

実際のエンドポイントにフォールバックする

こちらの書き方を使えば、リクエストをバックエンドに流すように組めるため、404の場合に実際のバックエンドに流す、宣言的に書いた場合はモックを返すってできそう