TypeScript
Jest
babel
stylelint

Babel 6 + TS 環境に Stylelint を雑に入れると Jest が通らない

先日 Babel の v7.0.0 がついに 正式リリース されましたが、今自分がやっているプロジェクトでは訳あってもう少し 6 系を使う予定です。

そんな折、軽率に node_modules ディレクトリを削除して作り直したら Jest が通らなくなってしまい困ったので、おおまかな原因と解決方法をメモします。


前提


  • JavaScript と TypeScript で開発をしている

  • JS のトランスパイルには Babel 6 を使っている

  • Stylelint も使っている

  • Jest も使っている


  • ts-jest@23.1.4 を使っている


起きたこと

Jest が以下のようなエラーを吐くようになり、 TypeScript のテストをパス出来なくなってしまった。

 FAIL  path/to/test.spec.ts

● Test suite failed to run

TypeError: Cannot read property 'bindings' of null

at Scope.moveBindingTo (node_modules/@babel/core/node_modules/@babel/traverse/lib/scope/index.js:867:13)
at BlockScoping.updateScopeInfo (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17)
at BlockScoping.run (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12)
at PluginPass.BlockStatementSwitchStatementProgram (node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24)
at newFn (node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:193:21)
at NodePath._call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:53:20)
at NodePath.call (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:40:17)
at NodePath.visit (node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:88:12)
at TraversalContext.visitQueue (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:118:16)
at TraversalContext.visitSingle (node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:90:19)


node_modules/@babel/core


:thinking:


原因



  • stylelint をバージョン固定せずにインストールしたことで stylelint@9.5.0 がインストールされた。


  • stylelint@9.5.0 の依存パッケージである postcss-jsx@0.33.0 の依存関係により Babel 7 (@babel/core) がインストールされてしまった。


    • 6系と7系はディレクトリが違うので、トップレベルの node_modules で同時に存在できる。



  • Jest (ts-jest@23.1.4) は Babel の 6 でも 7 でも動くものの、7 があれあば先にそちらを参照する。



ここから先は追えてないんですが .babelrc なども Babel 6 を想定した記述になっているので、そこらへんでコケているんじゃないかと思います。


対応

とりあえずの対応として、Babel 7 がインストールされない Stylelint のバージョンを指定しました。

stylelint@9.4.0postcss-jsx に依存しておらず Babel 7 は入ってこないので、これを採用しました。


今後

ts-jest のこの見境ないバベり問題は ts-jest@23.10.1 で対応されるっぽいです :raised_hands:

roadmap to next version (probably `23.10.1`) · Issue #697 · kulshekhar/ts-jest


思ったこと (追記)

これって package-lock.json まで消さなければ起こらなかった問題では…?