業務で扱っているSPAのReactバージョンを17.0にアップグレードした。
対象のSPAの開発が始まったのが2020年内で元々16.13からスタートしていることもあり、production codeに関するブロッカーは1つもなかった。
ちなみにReact Admin 3.10.4を使っているがReact AdminやMaterial UI関連で壊れた箇所もなかった。
enzymeのmountが使えない
ただし、テストでenzymeのmountを使っている箇所すべてでUncaught TypeError: Cannot read property 'child' of undefinedが発生した。
この問題は2020年8月時点から報告されており、2020年12月時点の最新バージョン3.11.0でも解消されていない。自分が見落としていなければ解消の目処も立っていない。
個人的にはもともとenzymeが好きではないので、mountを利用している箇所をすべてReact Testing Libraryで書き直した。diffは700行程度で済んだのでまぁ良かった。
現状そのプロジェクトには2つのtesting libraryが存在していてちょっとややこしい感じにはなっているが、shallowを使っている一部のテストを一掃できれば完全移行できるので目を瞑っている。
Reactや周辺のアップグレードのブロッカーであるenzyme*1を放置し続けるほうがより大きな問題になると判断した。
New JSX Transform
ReactのアップグレードとTypeScriptのアップグレード (v4.1以上) とタイミングがずれてしまったのでまだ対応してない...。
これはohbarye Advent Calendar 2020の4日目の記事。
*1:ここ数年、Reactのminor upgradeのたびに何かしら壊れている気がする
