Open5

MSWについて

okita_sokita_s

特徴

  • ネットワークレベルでの傍受
  • composableな関数構文
  • 標準化されたService Worker API
  • REST API, GraphQLをサポート
  • TypeScriptサポート

各Lib/FWのサンプルプロジェクトは以下
https://github.com/mswjs/examples

okita_sokita_s

getting started

Project作製

create react Appで行う

install

npm install msw --save-dev

モックの定義

REST/GraphQL用にそれぞれhandlerを定義する

mkdir src/mocks
touch src/mocks/handlers-rest.js
touch src/mocks/handlers-gql.js
okita_sokita_s

以下の2つのREST APIのモックを作成する

  • POST /login
    • ユーザーのログインを許可する
  • GET /user
    • ログインしているユーザーに関する情報を返す
// src/mocks/handlers.js
import { rest } from 'msw'

export const handlers = [
  rest.post('/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('/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',
      }),
    )
  }),
]

各パラメータに関する説明。

  • req:
    • リクエスト情報。クライアントがサーバーに送信するHTTPリクエストに関する情報を含む。
  • res
    • モックされたレスポンスの生成ユーティリティ。サーバーからのHTTPレスポンスを模倣するためのユーティリティ
    • 具体的には、resを使用して、MSWが特定のリクエストに対してどのようなHTTPレスポンスを返すかを定義できます。これにはステータスコード、ヘッダー、ボディ、エラーメッセージなどの情報が含まれます。
  • ctx:
    • 「モックレスポンスのステータスコード、ヘッダー、ボディなどを設定するための関数群」を表します。これは、モックレスポンスの詳細な設定に使用されます。
    • 具体的には、ctxを使って、モックレスポンスのステータスコードを設定したり、ヘッダーを追加したり、レスポンスボディを設定したりできます。これにより、テストケースごとに異なるレスポンスを動的に生成できます。
okita_sokita_s

定義した、request handlersはブラウザでもNodeでも利用可能。
但し、ServiceWorkerはNode上で実行できないため、やり方が少し異なる。