Enzyme から React Native Testing Library に移行した経緯 / 2022-07-20

Transcript

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

   View Slide

2. 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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

8. 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
   

   View Slide

9. 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.
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. 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
    

    View Slide

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

    View Slide

19. 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 な
    ど、新しいバージョンのサポートが滞って
    しまっているようです。
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide