Closed2024/02/29にクローズ1

mswを使う

testing

MSW

Vitest

けのび

データフェッチ系の関数の単体テストを扱う際にモックサーバーが必要な場面があります。

テストするだけに、色々と手間がかかってしまうのは何かと良くない。面倒でテストコードが記述されていなかったり、これは「そっとしとこ」みたいな心理が働いてしまいがちです。そういう心理が働いてしまうのは仕方ないことです。

msw を使うことでさくっとモックサーバーを構築できます。
同系統のものとして json-serverが挙げられます。

テスト時だけアプリケーション、または関数中でのリクエストの向き先をモックサーバーに変えるといったことはよくされますが、mswを用いることによりリクエストをキャッチしてくれるため、その必要はありません。これはmswの素晴らしい点だと思います。
（ただし、外のサーバーと疎通しなければならない場合は、ちゃんと外へリクエストを飛ばすようにしましょう）

使い方も非常に簡単。

簡単な例を記しておきます。

npm install -D msw

import { rest } from 'msw'
import { setupServer } from 'msw/node'

// ここではvitestを用いるケースとする
import { describe, test, expect, beforeAll, afterEach, afterAll } from 'vitest'

/**
 * GETリクエストをする関数
 */
async function awesomeFetchData(endpoint: string) {
  // 〜内容は省略〜
  // レスポンスのステータスが200なら、ボディを返却
  // レスポンスのステータスが200以外なら、Errorをスロー
}

describe('awesomeFetchData()', () => {
  const server = setupServer(...[
    rest.get('/ok', (_, res, ctx) => {
      return res(ctx.status(200), ctx.json({ message: 'ok' }))
    }),
    rest.get('/ng', (_, res, ctx) => {
      return res(ctx.status(404), ctx.json({ message: 'not found' }))
    }),
  ])

  beforeAll(() => server.listen({ onUnhandledRequest: 'error' }))
  afterEach(() => server.resetHandlers())
  afterAll(() => server.close())

  test('OK', async () => {
    const response = await awesomeFetchData('/ok')
    expect(response).toEqual({ message: 'ok' })
  })
  test('NG', async () => {
    await expect(() => awesomeFetchData('/ng')).rejects.toThrowError()
  })
})

このスクラップは2024/02/29にクローズされました