Jestのテストでハマったので調べてまとめる

jestの環境構築をしていて、import/exportが使えなかったり、.jsxの取り扱いでハマったので調べたことをまとめる。

CommonJSとESModule

JavaScriptには、モジュールの取り扱いのための仕様が2つ存在する。
jestでそのままimport/exportが使用できないのはここに起因する。

CommonJS

CommonJSとは、サーバーサイドなどのウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクトである。

Node.jsが標準で採用している。jestも同様。
モジュールの読み込みはrequire、モジュールの公開はmodule.exportsなどを使用する。
ファイルの拡張子を.jsとするとCommonJSで扱われる。

ESModule

ECMAScript（エクマスクリプト）は、Ecma Internationalのもとで標準化手続きが行われているJavaScriptの規格

最近の主流はこっちらしい。
モジュールの読み込みはimport、モジュールの公開はexportを使用する。
ESModuleとして実行するためには、package.jsonに設定を追加するか、ファイルの拡張子を.mjsとする。

package.json

{
  "type": "module",
  "main": "./main.js"
}

jestはcommonJSを採用しているので、ESModuleの記法であるimport/exportはそのままでは使用できないということらしい。
また、.jsxもそのままでは取り扱えない様子。
そのため、Babelを導入して各種変換をかます必要があるらしい。

Babelの導入

必要なのは以下の4つ。

1. Babelの導入
2. @babel/preset-reactの導入
   .jsxから.jsへの変換のために必要。
3. @babel/preset-envの導入
   ESModuleからCommonJSへの変換に必要。
4. jestのtestEnvironmentをjsdomに変更
   ブラウザ環境でのテストに必要。デフォルトはnode。

babelと.jsxから.jsへ変換するためのパッケージをインストールする。

npm install babel @babel/preset-react --save-dev

babel.config.jsonというファイルを以下の内容で作成する。
このファイルがないと、babelは何も変換処理を実施しない。

babel.config.json

{
  "presets": ["@babel/preset-react"]
}

次に、ESModuleからCommonJSへの変換をするためのパッケージをインストールする。

npm install @babel/preset-env --save-dev

その後、babel.config.jsonを以下のように変更する。

babel.config.json

{
 "presets": [
   ["@babel/preset-react", { "runtime": "automatic" }],
   ["@babel/preset-env", { "targets": { "node": "current" } }]
 ]
}

ブラウザでの実行を想定しているテストの場合、テスト実行環境をnodeからjsdomに変更する必要がある。
jsdomを利用可能とするため、下記パッケージをインストールする。

npm install jest-environment-jsdom --save-dev

その後、jest.config.jsonを以下の内容で作成する。

jest.config.json

{
  "testEnvironment": "jest-environment-jsdom"
}

expect(...).toBeInTheDocument is not a functionが出る場合は、@testing-library/jest-domをインストールし、

npm install @testing-library/jest-dom --save-dev

テストファイルにimport '@testing-library/jest-dom'を記載する。

参考