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

Uncategorized

以前、モックは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をインストール

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

Install - Getting Started
Mock Service Worker Docs

init

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

Browser - Getting Started
Mock Service Worker Docs

これで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はこちら↓↓↓

Merge pull request #22 from ksakae1216/feature/add-msw · ksakae1216/angular2022@36f68c0
feat(apps/myorg): add msw

コメント

タイトルとURLをコピーしました