🚫

jest + msw 1.x -> 2.xにアップデートできない！

2024/03/30に公開

Next.js

npm

MSW

tech

概要

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

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

アップデートできた！という人の記事をみたけどハマった様子がなかった。
私だけ(？)かもしれない。

対象読者

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はリクエストを捕捉できなくなった（たぶん設定周りがおかしい）

まとめ

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