MSWを用いたgrpc-webのmockについて
kiddiknMSWとは
Mock by intercepting requests on the network level. Seamlessly reuse the same mock definition for testing, development, and debugging.
sample for CRA
sample for storybook
kiddikn使用例はこの辺を見るのが一番分かりやすい
MSW を使うと、Storybook でも Http リクエストのインターセプトが可能になります。表示しただけで Http リクエストが飛んでしまうコンポーネントに MSW は便利です。今回のサンプルはフォームを送信するものなので、正常系・異常系を再現できる handler を用意・２つの Story を export します。
kiddiknstorybook側のmswを利用するためのaddon
-
storyのparametersにmswのhandlerを記述することができる
-
ほぼ全コンポーネントで使用されているhandlerは
preview.jsに記述することでバンドルされるSuppose you have an application where almost every component needs to mock requests to /login and /logout the same way. You can set global MSW handlers in preview.js for those requests and bundle them into a property called auth, for example:
-
もちろんhandlerは以下のような形を持っているので、各コンポーネントで
preview.jsのmockを上書きも可能(disableにするときは各コンポーネントでnullを渡す)type MswParameter = { handlers: RequestHandler[] | Record<string, RequestHandler | RequestHandler[]> }
kiddikn本題として、mswはgrpc-webのreq/resを表現できるのか？
結論で言うと、mswはhttpを受け付けてmockを返しているので、適切にreq/resをエンコード/デコードできればできそう
今のところはmsw側でこの辺りを面倒見てないようだが、protoファイルを読み込めるなら普通にレスポンスを設定して↓を使ってエンコードしたresponseをmswの戻り値にするので使える気がする(←試したいこと)