あるnpmパッケージを追加した後、Webpackのビルドは通っているのにJestでは以下のようなエラーが出るようになった。
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/en/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
/プロジェクトディレクトリ/node_modules/なにかのパッケージ/index.js:7
export * from './Hoge';
^^^^^^
SyntaxError: Unexpected token 'export'
ts-jest
しか構成していなかったが、ts-jest
はESModuleに対応していないbabel-jest
が必要npm i -D babel-jest @babel/preset-env @babel/plugin-transform-modules-commonjs
※@babel/core
はbabel-jest
に含まれるため不要だった
babel.config.js
を追加module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current',
},
}
]
],
plugins: [
'@babel/plugin-transform-modules-commonjs',
]
}
このとき設定ファイルを.babelrc
として作成してしまうと意図通りに動作しないのでbabel.config.js
とすること。 .babelrc
で設定ファイルを作るとデフォルトではnode_modules
内のファイルには設定が適用されない。
For people compiling node_modules this is also a change, because a .babelrc in one package will not affect that package’s node_modules. You’ll also want to rename your project-root .babelrc to a babel.config.js file exporting the config, to do that.
Only in coverage mode, latest babel: ‘import’ and ‘export’ may appear only with ‘sourceType: “module”’ · Issue #6053 · facebook/jest
どうやらbabel7系からデフォルトでnode_modulesは除外するようになったようで、webpack側で設定してもbabelの方で除外されてしまったようです。
babelがnode_modulesを通してくれないときの対応 - Qiita
transform
とtransformIgnorePatterns
の2箇所を修正する。
transform
にbabel-jest
のパターンを追加"transform": {
"\\.jsx?$": "babel-jest",
"\\.tsx?$": "ts-jest"
}
transformIgnorePatterns
に記載transformIgnorePatterns
はtransformしない対象を指定するオプションで、デフォルトではnode_moduels
全体が指定されている。これを上書きしてESModuleのパッケージだけをtransoformさせたいので、否定先読みを使って「ESModuleのパッケージ以外のnode_modules」を意味する記述となるようにする。やりたいことをNOT表現にしないといけないのでややこしい。
"transformIgnorePatterns": [
"/node_modules/(?!なにかのパッケージ|ESMが別パッケージのESMを呼んだりしているときは依存先も書く).+\\.js",
]
ts-jest
ではESMに対応予定次期バージョンではts-jest
単体でESModuleが使えるようになるらしい。
ts-jest supports ESM via a config option useESM in combination with jest config option extensionsToTreatAsEsm.
ESM Support | ts-jest
※投稿内容は私個人の意見であり、所属企業・部門見解を代表するものではありません。