jestでimport文を使うには
環境
・jest ^26.5.3
・babel-jest ^26.6.0
・@babel/core ^7.7.5
・@babel/preset-env ^7.7.6
{
"presets": [
"@babel/preset-react",
["@babel/preset-env", {
"targets": {
"node": "current",
"ie":11,
"safari":9
},
"useBuiltIns": "usage",
"corejs": 3,
"modules": false
}],
],
babelrcの初期設定がこんな感じになっています。
なぜimport/exportが使えないのか
上記設定のままだと、jest
でimport/export(es6)文を実行することはできません。
jestでは require系のcommonjsしか使えないためです。
なので、 babelの処理で es6 -> commonjsへの変換を行う必要があります。
es6 -> commonjsに変換するには?
鍵を握るのは、 @babel/preset-env
のoptionの modules
の項目です。
現在false
で設定しています。
falseだと、moduleの読み込み系の文を変換しない、つまりimport/export文はそのままなので
jestでエラーが出ているというわけです。
これを、 NODE_ENV
での切り替えを行い、 jestでテストしている時だけes6->commonjsに変換する
という風に設定します。
jest用のNODE_ENV
実はjestはデフォルトでtest用のNODE_ENV test
が設定されています。
if (process.env.NODE_ENV == null) {
process.env.NODE_ENV = 'test'
}
なので、こちらで jest NODE_ENV=test
と設定する必要はなく、
jest
コマンドだけでbabelrcの処理を分岐させることが可能です。
{
"presets": [
"@babel/preset-react",
["@babel/preset-env", {
"targets": {
"node": "current",
"ie":11,
"safari":9
},
"useBuiltIns": "usage",
"corejs": 3,
"modules": false
}],
],
"env": {
+ /* ここから下がjest用の処理 */
+ "test": {
+ "presets": [
+ "@babel/preset-react",
+ ["@babel/preset-env", {
+ "targets": {
+ "node": "current",
+ "ie":11,
+ "safari":9
+ },
+ "useBuiltIns": "usage",
+ "corejs": 3,
+ "modules": "cjs"
+ }]
+ ]
+ }
}
}
NODE_ENV
がtest
の場合は、 "modules": "cjs"
に設定しています。
(cjsはcommonjsの略です)
jestがbabelでコンパイルされるようにする
上記作業だけではまだes6->commonjs変換を行うことはできません。
jest実行時にbabelでコンパイルするよう指示する必要があります。
jest実行時のconfigファイルはデフォルトではjest.config.js
ですので、
jest.config.js
を作成します。
module.exports = {
verbose: true,
transform: {
'^.+\\.js$': 'babel-jest',
},
moduleFileExtensions: ['js'],
};
babel-jest
パッケージをインストールします。
このパッケージがbabelでのコンパイルを行ってくれます。
https://www.npmjs.com/package/babel-jest
$ npm i -D babel-jest
以上でOK! 動作チェック
export async function addCalcFun(baseValue, addValue) {
return baseValue + addValue;
}
import { callErrorFun } from './exporter'
describe('エラー', () => {
it('通常のエラー', () => {
expect(callErrorFun(2+2)).toBe(5)
})
})
$ npx jest importer.spec.js
問題なく設定できていれば、上記の処理がうまく走ります🎉
参考資料
https://qiita.com/riversun/items/6c30a0d0897194677a37
https://tech.bitbank.cc/lets-test-by-jest/
https://qiita.com/hogesuke_1/items/8da7b63ff1d420b4253f#importexport%E6%A7%8B%E6%96%87%E3%82%92%E4%BD%BF%E3%81%88%E3%81%AA%E3%81%84%E5%95%8F%E9%A1%8C%E3%81%AE%E5%AF%BE%E5%87%A6
Author And Source
この問題について(jestでimport文を使うには), 我々は、より多くの情報をここで見つけました https://qiita.com/irico/items/0fa0cde39b1305c4b508著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .