なんか書いていこうぜー .com

アプリの開発を再開しようとしたら、JavaScript のテストが動かなくなっていたので直した。 webpacker を使っていて、webpacker自体をアップデートしたら React が 16 に上がってしまったので引きずられて直した、という事案…

このあたり の奮闘記である。

アプリ側には影響なかった

結論からいうと、(アプリ側はまだまだ作成中なのだが、)改修の必要がなかった。

テスト周りがReactのメジャーバージョンアップによっていろいろ影響を受けていたので修正の必要があった。 ちなみにテストは、Jest と Enzyme を使っていて、テストを流すとどうも component のテストでエラーが発生しているようだった。

ちょっと調べて対応したらテストが通るようになったので、記録しておく。

Enzyme のバージョンアップ と adapter の導入

どうも Enzyme の v3 を使わなければならない、かつ、v3 から “adapter” という概念が追加になっているらしい。

React のバージョンが 16 になっているので、その名も “enzyme-adapter-react-16” なる adapter を導入した。Enzyme の README に表があるので、その表にある adapter を導入すればよい。package.json にある Jest の設定に”setupFiles” を追加してテスト実行前に require しておきたいファイルを書いておく。

  "jest": {
     "testMatch": [
       "**/__tests__/**/*.test.js?(x)"
+    ],
+    "setupFiles": [
+      "./app/javascript/__tests__/helpers/setup-test-env.js"
     ]
   },

上の ./app/javascript/__tests__/helpers/setup-test-env.js に以下の記述を追加して、adapter を設定する。

+import Enzyme from 'enzyme'
+import Adapter from 'enzyme-adapter-react-16'
+
+Enzyme.configure({ adapter: new Adapter() })

react-test-renderer のアップデート

テストを流すと以下のエラーが出た。

Cannot find module 'react/lib/React' from 'ReactShallowRenderer.js'
      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (node_modules/react-test-renderer/lib/shallow/ReactShallowRenderer.js:16:13)

“react/lib/React” となっているってことはなんとなーく、React 16 に対応できていないっぽい。バージョン確認したら、15.6.1 だったので yarn upgrade-interactive したら 16.0.0 になってエラーが解消された。

polyfill の導入

React は Map と Set と requestAnimationFrame が必要なので、polyfill の導入がテストでも必須っぽい。 Map と Set は babel-polyfill か core-js で、requestAnimationFrame は raf の polyfill を導入するとよいらしい。

先に Enzyme の adapter を追記したファイルに、polyfill を import する。

+import 'babel-polyfill'
+import 'raf/polyfill'

import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

まとめ

React を使っていたアプリ側の変更は必要なかったが、テスト周りは影響を受けていたので修正した。 enzyme, enzyme-adapter-react-16, react-test-renderer のアップデート・導入をして、テスト実行前に polyfill と Enzyme の adapter の設定を読み込ませることで解消することができた。