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

by Keisuke69

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Are you guys writing test code?

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

There's no test

Slide 9

Slide 9 text

Nightmare!

Slide 10

Slide 10 text

そうだ、Jest⼊れよう

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

What I did

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Not worked well

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

However

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

だます

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

襲いくる最後の敵

Slide 38

Slide 38 text

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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text