ニューヨーク・タイムズがEnzymeからReact Testing Libraryへ移行した方法

• NYTはReact 16からReact 18へのアップグレードに合わせて、従来使用していたEnzymeからReact Testing Libraryへテストユーティリティを移行した
  • 2016年からEnzymeを使ってきたが、ReactプラットフォームがReact Testing Libraryを推奨するようになり、移行が必要になった
• EnzymeはDOMツリーの文字列表現を生成する一方、React Testing Libraryは実際のDOMツリーを生成し、DOM全体の一部としてレンダリングする
• 何百ものファイルを移行する必要があったため、サイトトラフィックの維持とサービス停止の防止が重要だった

移行戦略は3つ

• Bulldozerアプローチ
  • 一度にすべてのファイルを大規模に修正する方式
  • コード衝突のリスクが高く、共同作業が難しい
• Consensusアプローチ
  • エンジニアがそれぞれファイルの所有権を持って進める共同作業方式
  • 新規プロジェクトや重要なプロジェクトに適している
• Piecemealアプローチ
  • 個々のファイルを対象に、戦略的に少しずつ修正していく
  • 毎日一貫して更新し、段階的な勢いを生み出す

ニューヨーク・タイムズの選択: Piecemealアプローチ

• 最も簡単なファイルから修正を開始 → 1〜2行の変更で済むファイルから着手
• React Testing LibraryでDOM要素を見つけ、それをテストする方法に焦点を当てた
• 初期の修正が完了すると、徐々に複雑なテストへ拡張できる
• 作業が進むにつれて一定のパターンが形成され、修正作業がしやすくなる
• エンジニアが参加しやすくなり、共同作業の強化につながる

移行の結果と成果

• Piecemealアプローチは時間こそかかるが、安定性と継続的な進行を実現できる
• コードベースに一定のパターンが生まれ、複雑なテストも容易に対応できるようになった
• 他のエンジニアも参加・貢献しやすい環境が整った
• 移行過程でバグの最小化と機能停止の防止を実現
• 移行の成功によって、技術的負債の解消と継続的な開発のバランスを維持できた

結論

• Piecemealアプローチによって、コードベースをReact Testing Libraryへ無事に移行した
• 段階的な修正により共同作業を強化し、コード品質も維持した
• 複雑なテストも一定のパターンに沿って容易に処理できるようになった
• 戦略的な計画と技術的負債の解消のバランスを取りながら、安定した移行を完了した