$30 off During Our Annual Pro Sale. View Details »

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

Keisuke69

May 21, 2021
Tweet

More Decks by Keisuke69

Other Decks in Programming

Transcript

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

    View Slide

  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⽉末退職予定、絶賛有給消化中

    View Slide

  3. Are you guys writing test code?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  8. There's no test

    View Slide

  9. Nightmare!

    View Slide

  10. そうだ、Jest⼊れよう

    View Slide

  11. View Slide

  12. View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. What I did

    View Slide

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

    View Slide

  26. Not worked well

    View Slide

  27. View Slide

  28. transformIgnorePattern
    • importエラーが発⽣したモジュールをtransformIgnorePatternに追

    • エラー出たらそれを追加するのを繰り返す

    View Slide

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

    View Slide

  30. However

    View Slide

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

    View Slide

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

    View Slide

  33. だます

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  37. 襲いくる最後の敵

    View Slide

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

    View Slide

  39. 再掲

    View Slide

  40. Conclusion

    View Slide

  41. Test from the beginning as much as possible

    View Slide




  42. View Slide