Next.js + jest にて fetch is not defined が出た時の対応

fetch を使ったテストを jest にて行っていたら以下エラーが出た。

ReferenceError: fetch is not defined

cross-fetch やら node-fetch やらを使うという記事がちらほら出てきて、
cross-fetch をしばらく試してみたけどうまくいかなかった。

FormData を使った POST を試みたけど、
content-type が multipart/form-data; boundary=----formdataxxxxxx にならず、
text/plain;charset=UTF-8 になってしまう。

なので他の方法で対応した。

環境

Next.js v15
React v19
Node v22
Jest v29

サンプルコード

Node が v18 以上で、 Jest が v28 以上じゃないとうまくいかないらしい。

構造

/ ─ CustomJSDOMEnvironment.ts
  └ jest.config.ts

CustomJSDOMEnvironment.ts

この記事によると、
このサンプルコードを参考にすればいいらしい。ほぼコピペ。

import JSDOMEnvironment from "jest-environment-jsdom"

export default class CustomJSDOMEnvironment extends JSDOMEnvironment {
	constructor(...args: ConstructorParameters<typeof JSDOMEnvironment>) {
		super(...args)
		if (!this.global.fetch) {
			this.global.fetch = fetch
			this.global.Headers = Headers
			this.global.Request = Request
			this.global.Response = Response
		}
	}
}

jest.config.ts

大事なところだけ抜粋。

import type { Config } from "jest"

const config: Config = {
	testEnvironment: "./CustomJSDOMEnvironment.ts",
}