confidential ©KitchHike Inc. Takuma Yamamoto 株式会社キッチハイク 2022.07.20 Enzyme から React Native Tesing Library に移行した経緯

confidential ©KitchHike Inc. BIOGRAPHY あなたは誰ですか？ ● バックエンド: Ruby on Rails ● フロントエンド: React ● アプリ: React Native 2 技術スタック SNS ● 　https://github.com/tamago3keran ● 　https://twitter.com/yamataku3831 ● 　https://qiita.com/tamago3keran ● サウナ ● 韓流ドラマ ● アニメ ... 趣味 Takuma Yamamoto Work at KitchHike, Inc. From Miyazaki

confidential ©KitchHike Inc. TODAY’s TOPIC 3 弊社が React Native Testing Library への移行に至った経緯を紹介 Enzyme RNTL （↑ 長いので以後 RNTL と省略します） 移行！

confidential ©KitchHike Inc. TODAY’s GOAL RNTL 導入、あるいは移行のきっかけに 導入へのきっかけ ご自身で開発しているプロダクトに導入 してみようかなと、考えるきっかけにな れば嬉しいです。 導入事例を知る どういった背景や経緯で導入し、結果ど ういうメリットを享受できたのかについ て、紹介します。

confidential ©KitchHike Inc. What does it focus? テストのどこにフォーカスした発表か？ 5

confidential ©KitchHike Inc. PREMISE 6 テストユーティリティに焦点を当てた発表 実装したコード テストランナー ユーティリティ ・・・ ・・・ ・・・

confidential ©KitchHike Inc. What are Enzyme and RNTL? Enzyme や RNTL とは何ですか？ 7

confidential ©KitchHike Inc. Enzyme is a JavaScript Testing utility for React that makes it easier to test your React Components' output. INTRODUCTION 8 Enzyme React のコードをテストしやすくするテスト ユーティリティのライブラリです。 state に直接アクセスできるなど、コンポーネ ント内部を詳細にテストできるという特徴を持 ちます。 引用元: https://github.com/enzymejs/enzyme

confidential ©KitchHike Inc. INTRODUCTION 9 React Native Testing Library 引用元: https://github.com/callstack/react-native-testing-library React Native のコードをテストしやすくするテ ストユーティリティのライブラリです。 エンドユーザーと同じようにコンポーネントを 使用するテストを書くことを奨励するような設 計になっています。 As a part of this goal, you want your tests to avoid including implementation details of your components and rather focus on making your tests give you the confidence for which they are intended.

confidential ©KitchHike Inc. Why did we use Enzyme? 弊社が Enzyme を使用していた理由 10

confidential ©KitchHike Inc. BACKGROUND 11 開発初期は CC ベースで開 発を行っていた 2017年3月ごろ React Native でアプリ開発を開始 当時主流だった CC で開発を行っていた

confidential ©KitchHike Inc. 当時は Airbnb が Enzyme を開発していた BACKGROUND 12 2016年ごろ Airbnb が Enzyme をリリース 独自の React テストユーティリティを ライブラリとして OSS にて公開 当時 Aribnb は自社のアプリを React Native で作成していた 自社アプリだけでなく React Native 関連ライブラリも 複数開発しており、 信頼できると判断し、 テストユーティリティとして Enzyme を採用

confidential ©KitchHike Inc. What happened? Enzyme を使用していたら何が起きたか？ 13

confidential ©KitchHike Inc. BACKGROUND 14 React Hooks登場に伴い、FC とHooksに書き換えを開始 2019年2月6日 React Hooks の正式リリースを発表 徐々に FC + Hooks に書き換えを開始

confidential ©KitchHike Inc. Enzyme で state にアクセスしていたテストが落ちる HAPPENED 15 Enzyme では CC の state にアクセスすることが可能だったので、 state が想定通りの値になるかをテ ストしていました。 FC + Hooks に移行することで、 CC の state ではなく、 useState によって管理 されている state にアクセスするように修正しなければなりませんでした。 それにより CC から FC + Hooks への移行に想定以上のコストがかかってしまい、開発効率の低下に繋 がってしまいました。

confidential ©KitchHike Inc. Why did we change the library? なぜ Enzyme から RNTL に移行したのか？ 16

confidential ©KitchHike Inc. 設計指針がより壊れにくいテストを作成可能に GUIDING PRINCIPLE 17 RNTL の設計指針は、エンドユーザーが実際に操作しているようなテストにすることで、より高い信頼 性を獲得することができるというものです。 Enzyme のように実装そのものをテストするのではなく、エンドユーザーの使われ方をテストすること を指しています。それを推奨するかのように Enzyme にはあった state に直接アクセスするような API も RNTL では提供されていません。 「The more your tests resemble the way your software is used, the more confidence they can give you.」 by Kent C. Dodds

confidential ©KitchHike Inc. 設計指針がもたらすメリット ADVANTAGES 18 Enzyme のように実装そのものをテストす るのではなく、エンドユーザーにどう表示 されるかなどをテストします。 それにより、内部の実装が変わっても結果 が変わらない場合、テストを修正しなくて も動作を担保できます。 結果、壊れにくいテストが書けるようにな ります。 機能開発に集中できる 壊れにくいテストが書けるため、テストの 修正コストを最小限に抑えることができる ようになります。 その結果、より機能開発の方に集中するこ とができるようになります。 より壊れにくいテスト

confidential ©KitchHike Inc. RNTL が主流になっていくような動向 TRENDS 19 React の公式ドキュメントでも、 RTL の使 用が推奨されています。 https://reactjs.org/docs/test-utils.htm l#overview Enzyme のメンテナーが1名 Airbnb が Enzyme の所有権を外部の GitHub に移すことを発表し、現在 Jordan Harband 氏ひとりでメンテナンスを行って いるようです。 https://github.com/enzymejs/enzyme/is sues/2429#issuecomment-858010582 React に追従できていない React の公式 Docs で推奨 Enzyme のメンテナンスをひとりで行って いることもあってか、 React 17 や 18 な ど、新しいバージョンのサポートが滞って しまっているようです。

confidential ©KitchHike Inc. Summary RNTL に移行した理由のまとめ 20

confidential ©KitchHike Inc. Enzyme から RNTL に移行した理由をまとめると... SUMMARY 21 ● テストの信頼性が高まる設計がされており、より壊れにくいテストを書けるから ● テストが壊れにくくなることで、より機能開発に集中できるようになるから ● Enzyme のメンテナーが現在1名しかいないから ● React 17 や 18 への対応が滞っていて、今後の開発に支障をきたすから ● React の公式ドキュメントでも RTL や RNTL の使用が推奨されているから

confidential ©KitchHike Inc. Recruitment 弊社のサービス概要 22

confidential ©KitchHike Inc. RECRUITMENT We are Hiring! 23 キッチハイクでは、食と暮らしを豊かにしてい く、そんな活動を仕事として取り組みたいエン ジニアを募集しています。 キッチハイク 採用 https://www.wantedly.com/companies/kitchhike

confidential ©KitchHike Inc. ご静聴ありがとうございました！ 24