2019-02時点でJestの設定で最後までハマったもの

Vue cli 3 はよいという話を以前書いたんだけど、Jest でテストできるようになるまで一つだけすごくハマったものがあって、それは Babel runtime の除外設定。

ちなみにバージョンは以下の通り。

  • @babel/core 7.3.3
  • jest 24.1.0

エラーはこういうもので、

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:

  • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatters" 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:

xxx/node_modules/@babel/runtime-corejs2/helpers/esm/classCallCheck.js:1
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest)
{export default function _classCallCheck(instance, Constructor) {
 ^^^^^^

babel-jest 経由で Babel を通したコードなのになぜか ESM版の runtime-corejs2 というコードを通るので、その中に export があって死ぬという怪奇現象。

で、今となってはどこをどう調べたか分からないんだけど、自分が1月に作った設定では以下の記述を足して回避していた。

transformIgnorePatterns: ["/node_modules/(?!@babel/runtime-corejs2)"]

恐らく Babel 7 + Jest ではこういう落とし穴がちょこちょこあるのだろう。

transformIgnore したら export を回避できるというのもよく分からん…。（そしてなぜこうしようと思ったのだ、過去の自分よ）

もしかしたら

Configuring Jest &#183; Jest

transformIgnorePatterns のデフォルト値が <rootDir> 含んでなくてプロジェクト内の node_modules を ignore し忘れてるってことだから明示的に設定したのかな。いやでも新しく足したのも <rootDir> 入ってないけど…。分かってるんならよりよいデフォルトに変えてほしい。

ちなみに最小設定は

  • rootDir
  • moduleNameMapper ( Webpack の alias 相当 )
  • transformIgnorePatterns

でイケるっぽい。

More