MSWを用いたgrpc-webのmockについて

MSWとは

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 します。

kiddikn

storybook側の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を表現できるのか？
https://github.com/mswjs/msw/issues/238

結論で言うと、mswはhttpを受け付けてmockを返しているので、適切にreq/resをエンコード/デコードできればできそう

今のところはmsw側でこの辺りを面倒見てないようだが、protoファイルを読み込めるなら普通にレスポンスを設定して↓を使ってエンコードしたresponseをmswの戻り値にするので使える気がする(←試したいこと)