テストのないReact Nativeの環境に後からJestをセットアップする

f:id:Keisuke69:20210523100017p:plain

先日タイトルの内容で久しぶりに勉強会で発表してきました。といっても10分のLTですが。React Native Meetupは過去に1回だけ参加したことがあって発表するのは初めてです。

ここ数年はAWSクラウドおよびサーバーレス関連での発表がほとんどだったのでそれも久々です。

内容はこちらで公開しています。既存のReact Nativeの環境にFacebook製のテスティングフレームワークであるJestを導入するにあたっての戦いの歴史です。

speakerdeck.com

ここではもう少し背景とかそのあたりの話を書いておきます。

とあるReact Nativeのプロジェクトを手伝うことになったんですがテストコードがなかったんですが、これ自体は特に批判とかしているわけではないです。そのときの状況次第でもありますしね。

単なる事実としてテストがなかったので、テストをできるように整備したってだけです。

僕はもともとサーバーサイド出身でTDD信者です。フロントエンド系はテストが難しいってのもわかります。でもやる。別に100%じゃなくてもいいと思うんですよね。

というわけでやっていくのですが、通常であればJestのセットアップはnpx react-native app initをした時点で行われるようになっているのですが、なぜかそれもない状態だったのでそこから始めました。このあたりは元々Expoを使っていたのをejectしたりされていたのでそういうのが関係あったのかもです。

なお、スライド中ではちゃんと触れていませんがプロジェクトの環境は以下のとおりでした。

React Native: 0.63.4
redux: 4.0.5
firebase: 7.9.0

少し古いと思われる人もいるかも知れませんがすでに走っているプロジェクトでもあったので、今回は積極的なアップデートは行っていません。これに対して以下を導入したり更新したりしました。

Jest: 26.6.3
react-test-renderer: 17.0.2
Firebase: 7.9.0 => 7.9.1 base-64: 1.0.0

スライドにもあるようになんとかJestでテストができる環境がようやく整っただけです。

これからテスト実装していくほうがよっぽど大変です。というのもやはりテストをする前提で書いていないコードなのでテストをしやすくするためのリファクタリングが同時進行になるんですね。結構大変だと思ってます。でもあとはやるだけだ!

他にもFirestoreを使ってる部分のモックテストが難しいとか、redux使っててそのフック周りのテスト難しいとかいろいろあるけどそれはまた別の問題ということでこのあたりも別途どこかで話をしていきたいと思います。

では。

©Keisuke Nishitani, 2023   プライバシーポリシー