この記事は.babelrcの設定を使わずにJest用の独自のBabelのオプションを設定する方法を紹介する記事です。
Node.jsで書かれたサーバーサイド用のテストとReactで書かれたフロントエンド用のテストでBabelの設定を変更したいために調べた内容です。他にも方法があれば教えていただけると助かります。
今回の記事ではReactのテストを例にしていますが、他のフレームワークやライブラリにも適応できます。
JestでBabelを使う
まずはじめにJestは設定をJavaScriptで書くことができます。
ファイル名をjest.config.jsにしておくか、Jestを実行するときに--config <path/to/file>のように--configオプションをつけて設定ファイルを指定することができます。
JestでBabelを使ってテストを実行するためにはbabel-jestというパッケージが必要です。
以下はReactのテストを実行するための最小の設定です。コードはclientというディレクトリにある想定です。
ここで注目すべきは"transform"です。ここでbabel-jestを指定することでJestの実行時にBabelを使います。
今回はReact用にJestを設定する例をとるため、jest.config.react.jsという名前にします。(名前は任意のため何でも良い)
module.exports = {
"testMatch": [
"<rootDir>/client/__tests__/**/*.test.js",
],
"moduleFileExtensions": [
"js",
"jsx",
],
"moduleDirectories": [
"node_modules",
"client",
],
"transform": {
"^.+\\.jsx?$": "babel-jest",
}
};
babel-jestにBabelの設定を指定する
babel-jestですが、デフォルトではプロジェクト内の.babelrcに書かれたBabelの設定を使います。
しかし、前述のとおりフロントエンドとサーバーサイドで別のBabelの設定で実行したいため、できれば.babelrcをいじりたくはありません。
そういった時のためにbabel-jestにはcreateTransformerというAPIが用意されています。このAPIを使うことでJestの実行時に使うBabelの設定を指定することができます。
まず、Babelの設定ファイルを用意します。babelrcをfalseにすることを忘れないようにしてください。
const babelJest = require("babel-jest");
const babelOptions = {
presets: [
["@babel/env", {
"targets": {
"node": "current",
},
"exclude": ["transform-regenerator"],
}],
"@babel/react",
],
babelrc: false,
};
module.exports = babelJest.createTransformer(babelOptions);
次に前述で出てきたJestの設定ファイル内の"transorm"の値を上記のBabelの設定ファイルのパスに変更します。
module.exports = {
"testMatch": [
"<rootDir>/client/__tests__/**/*.test.js",
],
"moduleFileExtensions": [
"js",
"jsx",
],
"moduleDirectories": [
"node_modules",
"client",
],
"transform": {
- "^.+\\.jsx?$": "babel-jest",
+ "^.+\\.jsx?$": "path/to/custom-transformer.js",
}
};
ここで上記のcustom-transformer.jsを作らずに以下のように直接Babelの設定オブジェクトを"transorm"の値に設定すればいいのではないかと思うかもしれませんが、TypeError: customJSTransformer.includes is not a functionとエラーになります。
module.exports = {
"testMatch": [
"<rootDir>/client/__tests__/**/*.test.js",
],
"moduleFileExtensions": [
"js",
"jsx",
],
"moduleDirectories": [
"node_modules",
"client",
],
"transform": {
"^.+\\.jsx?$": {
presets: [
["@babel/env", {
"targets": {
"node": "current",
},
"exclude": ["transform-regenerator"],
}],
"@babel/react",
],
babelrc: false,
}
}
};
Issueもありますが、上記のようにBabelの設定ファイルを別で分けておくしか解決方法はなさそうです。
自分は最初"transform"に直接Babelの設定を書いててエラーになりました。もしかするとこのIssueが閉じられるころには修正されているかもしれませんが、現時点(2019/03/11時点)ではこのエラーは発生します。そのため、Babelの設定は分けてください。
Jestを実行
JestとBabelの設定はできたのでjest --config jest.config.react.jsを実行すると、custom-transform.jsにて設定したBabelの設定を使ってJestを実行することができます。
参考
- Testing React Apps · Jest
- Using jest with custom babel config · Issue #6368 · facebook/jest · GitHub
最後までお読みいただきありがとうございました。不備や質問はコメント欄またはTwitterにメンションしてもらえると助かります。