- MSWとは?
- REST API およびGraphQLに対応したモックサーバー
- npmなどでインストール出来る
- "ネットワーク レベルでリクエストをインターセプトしてモックします。テスト、開発、およびデバッグのために同じモック定義をシームレスに再利用します。"(公式より翻訳)
- REST API およびGraphQLに対応したモックサーバー
- 用途と嬉しさ
- APIにアクセスするような処理を含む処理の開発時において、URLを一切変えずに挙動をテスト用のものに置き換えることが出来る
- 例: バックエンドのAPIが開発途中でもフロントエンドの開発を進めやすくなる
- 例: 滅多に起こらない異常系なども容易に再現してテスト出来る
- APIにアクセスするような処理を含む処理の開発時において、URLを一切変えずに挙動をテスト用のものに置き換えることが出来る
- https://github.com/junkor-1011/vite-react-sample
- axiosによるGET処理を伴う部分のテストコードでアクセス先をモック
- msw-storybook-addonにより、storybookにおけるstoryで使用
- jestなどの単体テストのテストコードでも有用(各moduleを挙動を細かくmockするよりも自然で楽にかける場合がある)
- 例えば、moduleのmockをやるとaxiosを使っているなど、テスト対象のモジュールの内部構造も多少知らないといけなくなる感じがあるが、 API側をmock出来ればテスト対象のモジュールはブラックボックスのままで振る舞いだけに注目していれば良くなる
- ただし、例えばMSWを使う方が遅くなるなどパフォーマンス面などでデメリットが出てくる可能性もあり、常に使うべきとまでは言えないはず
- (ちゃんと計測はしていないが、あるケースで1秒くらいテストの実行時間が伸びたような感じがある)
- https://zenn.dev/takepepe/articles/msw-driven-development
- https://zenn.dev/takepepe/articles/jest-msw-mocking
- https://zenn.dev/ryo_kawamata/articles/introduce-mock-service-worker
- https://zenn.dev/rabbit/articles/dd9b04940b93fe
- https://www.isoroot.jp/blog/4500/
- https://testing-library.com/docs/react-testing-library/example-intro/
- testing-libraryを使ったReactのテストコード例, APIへのアクセス部分のmockにmswを使っている