mswの記事を読んだ

フロントエンドのテストのモックには msw を使うのが最近の流行りらしい

読んだ。

前に見かけてmswというものがあるのか〜と流していたけどちゃんと読もうと思って読んだ。

msw とはフロントエンドの開発時に主に利用されるモックサーバーです。実際にローカルホストでモック用のサーバーを起動するのではなく、サービスワーカーレベルでリクエストをインターセプトしてリクエストを返却するという特徴があります。

モックはテストを書くときに書くけど、たしかに再利用なんてできないし、レイヤーもAPIコールのひとつ上とかになりがち(APIを叩く層のもうひとつ上をモックする)

まさに記事にある

あるコンポーネントが useFetch というモジュールに依存しており、さらに useFetch は axios に依存しているという状況

という感じ。

mswでhandlerを定義すれば、mock()やspyOn()と違って色々な箇所で実装を使い回せる。

msw を使用した場合にはネットワークレベルでモック化されるので axios の実装までもテスト対象に含まれせることができます。

なるほど。

• モックは少ないほうがいい
• 低レイヤー側をモックできればモックの数は少なくなるしテストできる範囲が広がる
• mswを使えばaxiosのようなAPIを叩く部分より上のレイヤーはテストを書けるようになる

という感じかな。

実際にモックを書いている部分を読んだが、/api/usersというパスへのリクエストを受け取りそのレスポンスを返すモックを作っている。こうすればレスポンスを受け取っている部分以降は全部テストを書ける。

mswのrestを使ってrest.get("/api/users"i, users.get)と書けば、/api/usersへのリクエストをしたときにusers.getを返すということになる。

で、↑をhandlersに定義し、そのhandlersをmswのsetUpWorkerにわたす(setUpWorkers(...handlers))

(記事内では)src/mocks/server.tsでsetUpWorkerして、そのserver.tsをテストコードで呼び出し、berofeAllでserver.listen()、afterEachでserver.resetHandlers()、afterAllでserver.close()を呼び出す、という感じで使う。

作成したモックサーバーを src/mocks/server からインポートして使用します。beforeAll() で全てのテストの開始前にモックサーバーをスタートし afterAll() で全てのテストが完了したあとにモックサーバーをクローズするようにします。

さらに、個々のテストが干渉し合わないように afterEach で各テストが終了するごとにモックサーバーの状態をリセットします。

また、テストを実行する Node.js の環境には fetch が存在しないので fetch の Polyfill が必要です。そのため whatwg-fetch をインポートしています。

なるほど完全に理解した。

序盤にも書いてあったがmswで書いたモックは色々なところで再利用できるというのが良さそう。ちょっとずつ書いていってみれたらいいな。