技術とかの雑なToday I Learnedメモ

jestにおけるmswの活用事例の記事を読んだ

jestにおけるmswの活用事例の記事を読んだ

jest における MSW の活用事例

昨日にmswの記事を読んだが、その記事に関連する形でtakepepeさんの記事もあったのでそれを読んだ。

Jest でモック化した場合には toHaveBeenCalledWith でどのような引数(クエリパラメータなどを想定)でモック化した関数が呼ばれたのかをテストできたり、 toHaveBeenCalledTimes でモック化した関数が何回呼び出されたのかをテストすることができます。

モチベーションとしてはこれと同じことをmswのrestで定義されたモックを叩いたときにやりたいというもの。

そもそも、昨日読んだ記事にserver.useのことが書いてあって、ちょっと見逃していたので読んだ。

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

インポートしたモックサーバーでは常に正常レスポンスを返却するので server.use() を使ってリクエストハンドラーを上書きする必要があります。

リクエストハンドラーの上書きがそのテストのときだけ上書きされるようにするためにはレスポンスを返却するときに res.once() を使うようにします。

restで定義したAPIのモックで、リクエストのURLは一緒だけど違うレスポンスを返却したケースを作りたい場合は、このようにserver.useを使うらしい。

そしてそのserver.use内でjest.fn()を定義することで、mswのモックの中でjestのモックにある関数を叩く。

この方法は axios の mock よりも手間かもしれませんが、リクエスト詳細を検証するためには、都合が良いこともあります。例えば「リクエスト header に任意の値が挿入されていること」というケースです。req.headers.getで、検査対象の値を抽出します。

なるほどなあ。

axiosをモックしていたら、リクエスト - レスポンス間の情報を検査したいときにできないので、こういう使い方もあるのかと参考になった。