【フロントエンド】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と連携してバージョン管理も非常に容易になります!
この記事が気に入ったらサポートをしてみませんか?