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

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

以前の記事で、@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 });

上記でも紹介している toHaveStyle を使って、要素の背景色が意図通りになっているかチェックします。 ボタンをタップするイベントを操作した後で、表示がアクティブなものになっているかのチェックなどに使えますね。

おわりに

React Native のテストがより便利になるパッケージを紹介しました。 @testing-library/react-native では jest を使っているので、さまざまな便利な使い方ができます。

https://jestjs.io/ja/docs/getting-started

一度 jest のドキュメントを見てAPIや使い方を学んでおくと、test の組み立て方やチェックすべきことの設計がやりやすくなります。

テスト書いておくと、リファクタリングにももちろんですし、さまざまな恩恵が受けられます。 テストしやすいように実装することを心がけることで、より綺麗なコードになるという考えもあるので、個人的にはテストは絶対用意したい派です。

  • このエントリーをはてなブックマークに追加