@testing-library/jest-native を使って、React Native のテストをもっと便利にする

React Native

テスト

Expo

以前の記事で、@testing-library/react-native を使って、テストを実装する方法を紹介しました。

@testing-library/react-native でスナップショットテスト

この情報に加えて、@testing-library/jest-native を追加で設定すると、よりテストを便利にかけるようになります。

以下、上記の内容などを参考に @testing-library/react-native を使えるようにした上でご確認ください。

ドキュメント

https://github.com/testing-library/jest-native

インストール

いつも通りです。npm もしくは yarn を使ってインストールしましょう。
テストで使うものなので、dev 環境へのインストールです。

npm install --save-dev @testing-library/jest-native

設定

パッケージをインポートする必要があります。
簡単なやり方としては、jest.config.json に以下を追加することで対応できます。

module.exports = {
  setupFilesAfterEnv: ["@testing-library/jest-native/extend-expect"],
};

これで React Native のテストをする上で、便利な matcher を利用できるようになります。

Matcher の紹介

toBeEmpty
要素が空の場合、 true になります。
toContainElement
要素の子やさらにその子とほっていき、渡されている要素が含まれるかをチェックします。
toHaveProp(string,value)
要素が特定の prop を受け取っているかをチェックできます。 prop のキーとその value をチェックできます。
toHaveTextContent(string)
要素が特定の text を要素に持っているかをチェックできます。
toHaveStyle(object)
要素が特定の style オブジェクトを受け取っているかをチェックできます。

他にもいくつかありますが、ざっと便利なのはこんな感じでしょうか。

注意点

ドキュメントに書いてありますが、ネイティブにブリッジするUI要素のみで作用するとのことです。拡張されているUIコンポーネントライブラリとかだと、上手くヒットしないことがあります。

Keep in mind that these queries will only work on UI elements that bridge to native.

その他ざっくりとしたテストのメモ

上記設定することで一通りコンポーネントUIの簡単な描写のテストはできるようになります。

たとえばいくつか紹介します。

要素がある・要素がない

    const output = component.getByDisplayValue(mockConsoleText);
    expect(output).toBeTruthy();

    const noOutput = component.queryByDisplayValue(mockConsoleText);
    expect(noOutput).toBeNull();

ここでは要素を getByDisplayValue で探しています。TextInput の入力されている文字列で検索する時に使います。
getByDisplayValue は存在すればその要素を取得できますが、ない場合は見つからないというエラーになってしまいます。

ですので、要素がないことをテストする場合は queryByDisplayValue を使います。
存在しない場合は null になるのでそれをチェックすれば検証が可能です。

getBy を使う場合は存在しないとエラー、queryBy を使う場合は存在しないと null とか空配列になります。適した用途で使い分けましょう。

特定のstyle が効いている

    const closeButton = component.getByText("close");
    fireEvent.press(closeButton);

    const touchable = component.getByTestId("fontFamilyItem");
    expect(touchable).toHaveStyle({ backgroundColor: Colors.primary });