Zenn
🚫

jest + msw 1.x -> 2.xにアップデートでハマり、解消した

2024/03/30に公開
1件
Next.js
npm
MSW
tech

概要

msw 2.xにアップデートしたかったができなかった！

v2.2.13までリリース済み、かつ、かなり丁寧なドキュメントだったのでいけるかなと想定した。
が、下記の箇所がハマりポイントだった。

https://mswjs.io/docs/migrations/1.x-to-2.x/#frequent-issues

↓その後

アップデートできた！という人の記事をみたけどハマった様子がなかった。
https://zenn.dev/krs1/articles/85c91ed2846fd1
で解消しました！

対象読者

  • msw v1を使っている方
  • ライブラリアップデートのタスクをしようとしている方

いいね！してね

この記事の事例は必要に応じて今後追記していく予定です！
「新しい事例が知りたい」「他の事例も知りたい」と思った人は、ぜひこの記事にいいね👍してください。筆者のモチベーションにつながります！

それでは以下が本編です。

説明すること／説明しないこと

説明すること

  • なぜアップデートしたいか
  • どこでハマったか
  • 解消するか

なぜアップデートしたいか？

msw-storybookのv2.0.0-next.1がプレリリースされている(latest v1.10.0)
それに併せて、msw v2にしたい。

なんならmswはv2.2.13まで出ているから、mswをアップデートしておきたい。
v1->v2へのメジャーアップデートである。I/Fの変更も多いし、早めに対応したい。

どこでハマったか？

jest.polyfills.jsに下記を貼る + 他にも設定値を修正した。

// jest.polyfills.js
/**
 * @note The block below contains polyfills for Node.js globals
 * required for Jest to function when running JSDOM tests.
 * These HAVE to be require's and HAVE to be in this exact
 * order, since "undici" depends on the "TextEncoder" global API.
 *
 * Consider migrating to a more modern test runner if
 * you don't want to deal with this.
 */
 
const { TextDecoder, TextEncoder } = require('node:util')
 
Object.defineProperties(globalThis, {
  TextDecoder: { value: TextDecoder },
  TextEncoder: { value: TextEncoder },
})
 
const { Blob, File } = require('node:buffer')
const { fetch, Headers, FormData, Request, Response } = require('undici')
 
Object.defineProperties(globalThis, {
  fetch: { value: fetch, writable: true },
  Blob: { value: Blob },
  File: { value: File },
  Headers: { value: Headers },
  FormData: { value: FormData },
  Request: { value: Request },
  Response: { value: Response },
})

下記のようなエラーが出る。
でここから

Cannot find module 'node:util' from 'jest.polyfills.js'

       5 | Object.defineProperties(globalThis, {
       6 |   ReadableStream: { value: ReadableStream },
    >  7 |   TextDecoder: { value: TextDecoder },
         |     ^
       8 |   TextEncoder: { value: TextEncoder },
       9 | });
      10 | 

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:306:11)
      at Object.<anonymous> (jest.polyfills.js:7:5)

エラーの詳細: https://github.com/r-sugi/nextjs-msw-example/pull/1#issuecomment-2027394350

解消するか？

ググって、下記のissueに辿り着いた。

いくつか試したがうまくいかなかった、、。
私が試したときはstorybookのmswは動作したが、jest側のmswはリクエストを捕捉できなくなった（たぶん設定周りがおかしい）
https://github.com/mswjs/msw/issues/1916#issuecomment-1845769931

まとめ

ライブラリのアップデートは先陣切ってやるより、対応事例が増えるのを待つべきだと思った。
せめてmsw-storybookがv2が出るまで待ってもよいかもしれない。

Discussion