Skip to content

Instantly share code, notes, and snippets.

@junkor-1011
Created September 19, 2022 16:08
Show Gist options
  • Save junkor-1011/372f252799810be2486f463d380c7300 to your computer and use it in GitHub Desktop.
Save junkor-1011/372f252799810be2486f463d380c7300 to your computer and use it in GitHub Desktop.
LT資料: Introduce MSW

MSW

公式ページ

概要

  • MSWとは?
    • REST API およびGraphQLに対応したモックサーバー
      • npmなどでインストール出来る
    • "ネットワーク レベルでリクエストをインターセプトしてモックします。テスト、開発、およびデバッグのために同じモック定義をシームレスに再利用します。"(公式より翻訳)
  • 用途と嬉しさ
    • APIにアクセスするような処理を含む処理の開発時において、URLを一切変えずに挙動をテスト用のものに置き換えることが出来る
      • 例: バックエンドのAPIが開発途中でもフロントエンドの開発を進めやすくなる
      • 例: 滅多に起こらない異常系なども容易に再現してテスト出来る

実践例

その他コメント

  • jestなどの単体テストのテストコードでも有用(各moduleを挙動を細かくmockするよりも自然で楽にかける場合がある)
    • 例えば、moduleのmockをやるとaxiosを使っているなど、テスト対象のモジュールの内部構造も多少知らないといけなくなる感じがあるが、 API側をmock出来ればテスト対象のモジュールはブラックボックスのままで振る舞いだけに注目していれば良くなる
  • ただし、例えばMSWを使う方が遅くなるなどパフォーマンス面などでデメリットが出てくる可能性もあり、常に使うべきとまでは言えないはず
    • (ちゃんと計測はしていないが、あるケースで1秒くらいテストの実行時間が伸びたような感じがある)

参考

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment