【フロントエンド】Wiz Engineer 技術共有会　6月第4週

MSW(Mock Service Worker)でモックを作ってみた

フロントエンドでAPIのモックを作成するにはいろいろな方法がありますよね。

• json-server

• stoplight Prism

• agreed

• api route (Next.js)

上記で挙げた以外にも色々とフロントエンドでモックAPIを作成する方法があるかと思いますが、今回はMSWを使ってモックを作成してみましたのでそれについて簡単に説明します。

簡単なREST API例( https://mswjs.io/docs/getting-started/mocks/rest-api)

// 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',
      }),
    )
  }),
]

公式のものですが、上記の例だと`POST: /login`と`GET: /user`が作成されています。たったこれだけでモックAPIの作成が可能となります。

StoryBookを使ったユニットテストをやってみた

@storybook/testing-react、jestのアドオンを活用しStoryBook上でユニットテストを実施してみました。
以下の記事が非常に分かりやすく説明されております！

参考：https://dackdive.hateblo.jp/entry/2022/08/30/090000

ChromaticでStoryBookを共有する

無料枠に制限があるものの、デザイナーとフロントエンドとのコミュニケーションコストを削減し、コンポーネント管理をシームレスに行うことが可能になりそうです！
また、CIを導入することでGithubと連携してバージョン管理も非常に容易になります！