Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

Jestを実行したときに Error [ERR_REQUIRE_ESM]: require() of ES Module になったので解決する

参照したページ

Jest の実行環境のサンプル

yarn upgrade について

Error [ERR_REQUIRE_ESM]: require() of ES Module の解消について

Error [ERR_REQUIRE_ESM]: require() of ES Module の調査について

表示されたエラー

以下のようなエラーが表示されました。

Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/your/app/node_modules/string-width/index.js from /path/to/your/app/node_modules/cliui/build/index.cjs not supported.
Instead change the require of index.js in /path/to/your/app/node_modules/cliui/build/index.cjs to a dynamic import() which is available in all CommonJS modules.

翻訳してみると以下の通りでした。

エラー [ERR_REQUIRE_ESM]: /path/to/your/app/node_modules/cliui/build/index.cjs からの ES モジュール /path/to/your/app/node_modules/string-width/index.js の require() はサポートされていません 。
代わりに、/path/to/your/app/node_modules/cliui/build/index.cjs の Index.js の require を、すべての CommonJS モジュールで使用できる動的 import() に変更します。

warning について

yarn install とか実行したときに以下の警告が出ていたっぽい。

warning Pattern ["strip-ansi@^6.0.1"] is trying to unpack in the same destination "/Users/motomichi/Library/Caches/Yarn/v6/npm-strip-ansi-cjs-6.0.1-9e26c63d30f53443e9489495b2105d37b67a85d9-integrity/node_modules/strip-ansi-cjs" as pattern ["strip-ansi-cjs@npm:strip-ansi@^6.0.1"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["string-width@^4.1.0"] is trying to unpack in the same destination "/Users/motomichi/Library/Caches/Yarn/v6/npm-string-width-cjs-4.2.3-269c7117d27b05ad2e536830a8ec895ef9c6d010-integrity/node_modules/string-width-cjs" as pattern ["string-width-cjs@npm:string-width@^4.2.0"]. This could result in non-deterministic behavior, skipping.
warning Pattern ["strip-ansi@^6.0.0"] is trying to unpack in the same destination "/Users/motomichi/Library/Caches/Yarn/v6/npm-strip-ansi-cjs-6.0.1-9e26c63d30f53443e9489495b2105d37b67a85d9-integrity/node_modules/strip-ansi-cjs" as pattern ["strip-ansi-cjs@npm:strip-ansi@^6.0.1"]. This could result in non-deterministic behavior, skipping.

あと has unmet peer dependency も沢山出てる。

エラーを解消する

yarn の cache を削除します。

yarn cache clean

パッケージをアップグレードします。

yarn upgrade

それでも駄目な場合

もしかすると node_modules ディレクトリを丸ごと削除して yarn install し直したら解消されるかもしれません。

yarn の cache を削除します。

yarn cache clean

yarn.lock を削除します。

rm yarn.lock

node_modules ディレクトリを削除します。

rm -rf node_modules

パッケージをインストールし直します。

yarn install

それでも駄目な場合は Jest の実行環境のサンプルを作って挙動を確認する

概要

とにかく簡素なサンプルを作って動かしてみてから、エラーの起こる環境との違いを探ります。

サンプル作成に参照したページ

まずは Jestでテストを書こう | TypeScript入門『サバイバルTypeScript』 を参考に簡素なサンプルを作って、正常にテストが実行できることを確認しました。

プロジェクトを作成する

どこでも良いので任意の場所にサンプルプロジェクトを作成します。

mkdir jest-tutorial
cd jest-tutorial

package.jsonを作成します。

touch package.json

package.json には以下の通り記述します。

{
  "name": "jest-tutorial",
  "license": "UNLICENSED"
}

TypeScriptのインストール

プロジェクトにTypeScriptをインストールします。

yarn add -D typescript

次に、tsconfig.jsonを生成します。

yarn tsc --init

Jestをインストールする

以下のコマンドを実行してインストールします。

yarn add -D jest ts-jest @types/jest

Jestの設定ファイルを作る

次のコマンドを実行すると、Jestの設定ファイル jest.config.js が生成されます。

yarn ts-jest config:init

生成された jest.config.js の内容は次のようになります。

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

この @type のコメントはエディターに型情報を与えるためのもので、これを書いておくことで、エディター上で入力補完が効くようになるそうです。

Jestが動くかを確認する

確認用のファイルを作成します。

touch check.test.ts

check.test.ts には以下の通り記述します。Jestが動くかどうかだけ確認したいので、expectなどは記述せずに console.log だけ記述しています。

test("check", () => {
  console.log("OK");
});

以下のコマンドを実行してみます。

yarn jest

成功したらここまではOKです。