[Angular] MSW(Browser)モックの導入

以前、モックはjson-serverが簡単だという記事を書いた。

このjson-serverは構築がとても簡単で気に入ってるんだけど、別でプロセスを起動しなければいけないのがちょっと面倒だなと思い始めてきた。(yarn serveして、別窓でyarn mockが必要）

どうせなら、yarn serveだけで何とかならないかと思ったら、昨年mswの存在を知ってちょっとやってみた。

こちらも導入はすごく楽だった（最近、何でも便利になってきた）

ちなみにmock起動は、node, browserの２パターンがある。どちらを使うかは使う側の都合によるだろう。自分の場合は、browserを選択。その理由も記載する。

browserを選択する理由

もし、Jestやe2eなどで、モックを使いたいならnodeを選択する方が良いだろう。（https://mswjs.io/docs/getting-started/integrate/node）

自分の場合は、Jestで使わないので、browserを選択。

それにnodeを選択すると、ソースにsetupをコーディングしなければいけないのもちょっと嫌だなと思う。(browserはenvironment.tsに記載するので安心、mockの設定をコードに書きたくない）

ということで、早速、やってみる

ここを参考にインストール

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

これでpackage.jsonが更新され、mockServiceWorker.jsが作成されます。

任意の場所にbrowser.jsを作成してください。

今回は、apps/myorg/src/mocksの下に作成しました。

中身は下記を参考に。

mockの定義と起動をしています。

ローカルでmockを起動したいのでenvironement.tsに追記します。

これで、おしまいです。

後は、angularを起動して確認です。

コンソールに赤字で[MSW] Mocking enabled.と表示されます。

次に、fetchコマンドでmock確認。

ちゃんとレスポンス返ってきましたね！

githubはこちら↓↓↓