expoアプリをテスト

expoにjestを導入

expoアプリをテストするためにjestを導入しました。
導入の際はexpoのサイトとChatGPTを参考にしました。

1. 必要なパッケージをインストール

   $ expo install jest-expo jest @types/jest -- --dev
   $ expo install @testing-library/react-native -- --dev
   

2. package.jsonを修正

     "scripts": {
       ...
   +   "test": "jest"
     },
   + "jest": {
   +   "preset": "jest-expo"
   + },
   

これで下準備は終わってるっぽい
めちゃ簡単ですね

テストを書いて実行

別途作成したHeader.tsxをテストしてみます。
以下のテストはpropsのtitleに入れた文字列が描画されることを確認します。
Header.test.tsx

import { render } from '@testing-library/react-native';

import { Header } from './Header';

describe('<Header />', () => {
  test('Text renders correctly on Header', () => {
    const { getByText } = render(<Header title="test title" />);
    getByText('test title');
  });
});

テストを実行

$ yarn test

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.958 s, estimated 2 s
Ran all test suites.
✨  Done in 1.88s.

いい感じ

感想

jestの導入は思ったより簡単でした
公式ドキュメントとChatGPTの両方から情報収集すると調査がはかどりますね
上記テストコードも公式サイトのコードをcursorがいい感じに修正してくれました
私はファイルを作ってタブを押しただけ
最近はAIのサポートが手厚いからちょっとした技術の調査は昔に比べて易しくなってきてますね