はじめに
こんにちは。二ヶ月ぶりの投稿です。
Webを開発しているとき、画面のテストについて悩んでることがありますか？
- サーバから返したデータでUIを確認したいけど、サーバAPIがまだできていない、または不具合があって使えない
- テストのためソースコードを変えるのは面倒くさい
- サーバでダミーデータを作るのは面倒くさい
- 異常系、特にHTTPエラー系のテストが難しい
- クロスオリジンなどの制限がかけていて、リモート環境でなければテストができない
などなど…
APIモックを実装し、ローカルでダミーデータを作ってテストができれば良いな、って思っていることがないでしょうか？
こういう時、Mock Service Worker（MSW）がおすすめです。
MSWの利用について、投稿が長くなりそうなので、ここで【導入編】と【実装編】に分けて進んでいきたいと思います。
MSWって、何？
MSWの公式サイトを見てみましょう。
https://mswjs.io/
Mock Service Worker is an API mocking library that uses Service Worker API to intercept actual requests.
Mock Service WorkerとはService Worker APIを用いて実際のHTTPリクエストを遮るようなAPIモックライブラリーです。
By bringing the ability of Service Workers to capture requests for the purpose of caching, Mock Service Worker enables API mocking on the highest level of the network communication chain. It is the closest thing to a mocking server without having to create one.
Service Workersはキャッシュのためにリクエストを捕獲するので、MSWはそれを利用してネット通信チェインの最上位レベルにAPIモックができるのです。これに通じで、モックサーバを構築しなくても、ほとんど同じなものができます。
Since Service Worker is a standard API shipped by all modern browsers, integrating Mock Service Worker into your application, or testing setup, requires no extra configuration, but placing a worker file and declaring mocks.
現代のブラウザがすべてはService Workerを搭載しているため、webアプリにMSWの実装と利用は特別な配置とかが不要です。単にworkerファイルを入れて、モックを定義しては十分です。
まぁ、細かいとこはさておき、おおまかにこんな感じですね。
では、どうやってMSWを導入するか、見てみましょう。
MSWの導入
ここで、React Native+Expoで開発しているwebアプリ（REST API）を例として、導入方法について紹介します。
MSWはブラウザーもnodeも利用可能ですが、それぞれ配置方法が異なります。Expoではローカルでテストする時に、HTML/CSS/JavaScriptを作成しSPAになるため、ブラウザーでの導入方法に従います。
MSWのインストール
最初はもちろん、インストールです。
npm install msw --save-dev
MSWの初期化
次に、MSWの初期化を行います。
npx msw init <PUBLIC_DIR> --save
ここで<PUBLIC_DIR>とはHTML/JS/CSSファイルを置いているフォルダーです。
私が使っているReact Native+Expoの場合、ルートにwebというフォルダーを作成していたら、そのwebが<PUBLIC_DIR>となります。
フォルダーツリーはこういう感じです：
ルート（プロジェクトフォルダー）
├ assets
├ node_modules
├ src
│ ├ mocks：ここでMSW用のファイルを置く
│ └ ほかのソースファイル
├ web
│ ├ index.html
│ └ mockServiceWorker.js：初期化したらこのファイルが出る
├ web-build
├ App.js
├ package.json
└ その他
mockServiceWorker.jsがwebフォルダーの中にあれば、初期化が終わります。
Workerの配置
上記src/mocksフォルダーに、必要な配置ファイルを入れます。
まずはbrowser.jsです。
browser.jsの内容は単純で、下記の通りに変更が不要です。
// src/mocks/browser.js
import { setupWorker } from 'msw'
import { handlers } from './handlers'
// This configures a Service Worker with the given request handlers.
export const worker = setupWorker(...handlers);
次にhandler.jsを作成します。
// src/mocks/handlers.js
import { rest } from 'msw'
export const handlers = [
// ここでAPIモックを入れる
];
handlersにモックしたいAPIを追加します。追加方法は次の【実装編】に詳しく紹介します。
MSWの有効化
上記の作業が終わったら（handlers.jsは後で大丈夫）アプリにworkerを起動します。
App.jsに下記のコードを入れておきます。
const { worker } = require('./mocks/browser')
worker.start()
もちろんMSWが有効化したくない場合もあるので、上記ソースコードに条件を付きましょう。
最後に
導入が成功した場合、ローカルでアプリを起動すると、ブラウザーのコンソールに下記の情報が出ます。
> [MSW] Mocking enabled
以上、MSWの導入です。
次回【実装編】は具体的にAPIモックを実装する方法を紹介します。