俺の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を導入したときの戦いの記録です。

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⼊れよう
24. What I did
25. まずは普通にJestを導⼊ • まずは普通に`yarn add –dev jest`でJestを導⼊ • packege.jsonに以下を追加 • babel.config.js
26. Not worked well
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. テ ス ト