個人的なプロジェクトで使っているMSWをv1からv2にアップデートしてみたので、その際にやったことを書いておきます。

背景

MSWのv1を使っていましたが、v2が出てしばらく経ち、かつStorybookのアドオン側もv2で動きそうな雰囲気がしてきたのでアップデートしてみました。

環境

• Node.js 20.12.2
• MSW 1.3.3 -> 2.2.14
• msw-storybook-addon 1.10.0 -> 2.0.0

やったこと

MSWのドキュメントにあったマイグレーションガイドをもとに進めました。

MSWからimportするものとgetメソッドなどに渡すリゾルバの引数が変わった

コード自体はドキュメントから抜粋しますが、importするものがhttpに変わり、引数にそれぞれリクエストやレスポンスなど渡していたものがオブジェクトにまとまったようです。
全部書き換えないといけなくてなかなか大変でした。

import { rest } from 'msw';

rest.get('/resource', (req) => {
  const productId = req.url.searchParams.get('id')
})

import { http } from 'msw'
 
http.get('/resource', ({ request }) => {
  const url = new URL(request.url)
  const productId = url.searchParams.get('id')
})

また、これまでレスポンスやコンテキストも取得できましたが、リクエストに関するもののみになったようです。

レスポンスについては、 HttpResponse を用いる形に変わったようです。 Response もあるようですが、前者が推奨のよう。

レスポンスの共通処理を書き換え

Next.js と MSW 高階関数で書かれている内容を参考に、遅延でレスポンスを返すような共通レスポンス処理を実装していました。

export const delayedResponse = createResponseComposition(undefined, [
  context.delay(isTesting ? 0 : 1000),
]);

先述のコンテキストを渡せなくなったのと、 createResponseComposition が無くなったような気がしており、ちょっとどうだろうとは思いつつ書き換えてみました。

export const delayedResponse = async (
  response: JsonBodyType,
  option: HttpResponseInit = { status: 200 },
) => {
  await delay(isTesting ? 0 : 1000);

  return HttpResponse.json(response, option);
};

Worker周りも変更が入っていますが、Storybookのアドオン側でやってくれていそうなので特に何もしていません。

一旦この状態で様子を見てみることにしました。