Upgrade to Pro — share decks privately, control downloads, hide ads and more …

俺のJestが動かない 2021 Spring / My Jest does not work well 2021 Spring

俺のJestが動かない 2021 Spring / My Jest does not work well 2021 Spring

React Native Meetup #12でのLT資料です。

https://react-native-meetup.connpass.com/event/210587/

React NativeにJestを導入したときの戦いの記録です。

67962a042668ffac9323b8e0c55eee6e?s=128

Keisuke69

May 21, 2021
Tweet

Transcript

  1. 俺のJestが動かない 2021 Spring @Keisuke69 React Native Meetup #12

  2. Amazon Web Services Japan K.K. Keisuke Nishitani @Keisuke69 Programming is

    a creative work. 🎨 Love Music ♫ Love Camping ⛺ Blog: https://www.keisuke69.net/ 💻 Everything will be serverless. ⚡ ※5⽉末退職予定、絶賛有給消化中
  3. Are you guys writing test code?

  4. Today, I will talk you guys about setting up testing

    environment with Jest
  5. ⻄⾕のスペック • React Nativeは名前だけ知ってる状態 • ネイティブアプリ開発の経験はない • Reactは多少知っている • クラウドはそこそこ詳しいほう

  6. 事の成り⾏き • とあるプロジェクトの⼿伝いをすることに • React Nativeで書かれている • もともとExpo使っていたけどejectされた状態 • とりあえず既存コードの修正を試みる

  7. 事の成り⾏き • とあるプロジェクトの⼿伝いをすることに • React Nativeで書かれている • もともとExpo使っていたけどejectされた状態 • とりあえず既存コードの修正を試みる…が!

  8. There's no test

  9. Nightmare!

  10. そうだ、Jest⼊れよう

  11. None
  12. None
  13. None
  14. None
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. What I did

  25. まずは普通にJestを導⼊ • まずは普通に`yarn add –dev jest`でJestを導⼊ • packege.jsonに以下を追加 • babel.config.js

  26. Not worked well

  27. None
  28. transformIgnorePattern • importエラーが発⽣したモジュールをtransformIgnorePatternに追 加 • エラー出たらそれを追加するのを繰り返す

  29. 超えられない壁 • Expo由来のライブラリが原因 • この例ではexpo/vector-iconsのttfファイルがダメだった • jest-expoを⼊れれば解決 • package.jsonのpresetをjest-expoに変更

  30. However

  31. Firebaseがエラー • Firebase SDKとjest-expoの相性が悪い • 7.9.1だとエラーになる • 7.9.0だと別なエラーで動かない • ⼀番簡単な解決⽅法はpresetをreact-nativeにする

  32. jest-expoをやめる • 振り出しに戻る • ttfファイルをどうにかするしかない

  33. だます

  34. moduleNameMapper • ttfファイルに限らずこの⼿のファイルを実⾏時にモックに置き換 えてしまう • テストで別にフォントとか必要ないし • ダミーとなるファイルを⽤意した上で、特定の拡張⼦のファイル はそちらを⾒るように指定する

  35. ⽤意するもの • fileMock.tsx • 各種バイナリファイル⽤ • styleMock.tsx • CSS⽤

  36. ⽤意するもの • package.jsonでJest設定として以下を追加 • ttfに限らず静的アセットをまるっと指定している

  37. 襲いくる最後の敵

  38. 襲いくる最後の敵 • テスト実⾏時のエラーではない • Firebaseのバージョンが7.9.1以降で発⽣する模様 • 対応はyarn add base-64した上でApp.tsxに以下を記述

  39. 再掲

  40. Conclusion

  41. Test from the beginning as much as possible

  42. テ ス ト