MSW - mrsekut-p

MSW

Mock Service Worker

ServiceWorkerがrequestをinterceptし、mock serverからresponseを返す

REST、GraphQLに対応

参考

フロントエンドのテストのモックには msw を使うのが最近の流行りらしい

自動でinterceptするので、モックのために向き先を変える必要がない

mock serverは、Expressと同じような感じでendpointを定義する

用途は、local開発、test、stroybookなど

https://zenn.dev/takepepe/articles/jest-msw-mocking

Cypressで動作する

https://zenn.dev/takepepe/articles/nextjs-msw-hof

https://zenn.dev/t_keshi/articles/ok-ihave-mockapi

https://zenn.dev/takepepe/articles/msw-data-userflow-testing

test

MSW Storybook Addon

https://storybook.js.org/addons/msw-storybook-addon/

Storybookを使ったtest

react-queryのuseQueryを使ったstoriesを書きやすくなるらしい

↑このhooksに限らないだろうけど、同じような役割のhooksたち

useSelectorとかuseContextとか、状態を扱う系？

https://twitter.com/hanetsuki_dev/status/1530499215914598400

https://zenn.dev/takepepe/articles/typesafe-msw-with-aspida

https://github.com/mswjs/msw/discussions/1464

fetch apiをサポート

https://azukiazusa.dev/blog/examples-of-msw-practice-Applications/

https://azukiazusa.dev/blog/msw-request-assertions/

https://azukiazusa.dev/blog/using-msw-to-mock-front-end-tests-seems-to-be-the-latest-trend./