以前、モックはjson-serverが簡単だという記事を書いた。
このjson-serverは構築がとても簡単で気に入ってるんだけど、別でプロセスを起動しなければいけないのがちょっと面倒だなと思い始めてきた。(yarn serveして、別窓でyarn mockが必要)
どうせなら、yarn serveだけで何とかならないかと思ったら、昨年mswの存在を知ってちょっとやってみた。
こちらも導入はすごく楽だった(最近、何でも便利になってきた)
ちなみにmock起動は、node, browserの2パターンがある。どちらを使うかは使う側の都合によるだろう。自分の場合は、browserを選択。その理由も記載する。
browserを選択する理由
もし、Jestやe2eなどで、モックを使いたいならnodeを選択する方が良いだろう。(https://mswjs.io/docs/getting-started/integrate/node)
自分の場合は、Jestで使わないので、browserを選択。
それにnodeを選択すると、ソースにsetupをコーディングしなければいけないのもちょっと嫌だなと思う。(browserはenvironment.tsに記載するので安心、mockの設定をコードに書きたくない)
ということで、早速、やってみる
mswをインストール
ここを参考にインストール

init
以降は下記の手順を参考にしていきます。

これでpackage.jsonが更新され、mockServiceWorker.jsが作成されます。
browser.js作成
任意の場所にbrowser.jsを作成してください。
今回は、apps/myorg/src/mocksの下に作成しました。
中身は下記を参考に。
mockの定義と起動をしています。
environement.tsに追記
ローカルでmockを起動したいのでenvironement.tsに追記します。
これで、おしまいです。
mock確認
後は、angularを起動して確認です。
コンソールに赤字で[MSW] Mocking enabled.と表示されます。

次に、fetchコマンドでmock確認。
ちゃんとレスポンス返ってきましたね!

参考
githubはこちら↓↓↓
コメント