React Native で jest を使う際の async-storage や safe-area-context のパッケージのモック

React Native

テスト

jest

React Native でも jest を用いてテストを実装できます。

簡単なスナップショットテストであったり、ロジック部分のテストであったり、設定をしっかり行えばさまざまなテストを用意できます。

コンポーネントのテストを行う時、端末で起動していないと動作しないパッケージがあり、テストの際にエラーを返すものがあります。その場合にはモックを用意して、動作を仮の形に置き換えることでテストを実行できます。

やり方を簡単にメモしておきます。

概要

エラーになる例
@react-native-async-storage/async-storage のエラーを回避する
react-native-safe-area-context のエラーを回避する

エラーになる例

ロジックとしてデータを保存・取得するために @react-native-async-storage/async-storage を使っている場合
コンポーネントで react-native-safe-area-context を使って、端末の画面の余白などを取得している場合

このような場合、そのままだとテスト時にエラーが発生してしまいます。簡単な回避方法をそれぞれ紹介します。

他のパッケージでも同様のやり方で回避できることがあるので、基本として知っておくと良いです。

`@react-native-async-storage/async-storage` のエラーを回避する

これは実機であればasync-storage でデータの読み書きができるのですが、jest 上ではそれが使えないためエラーになります。

以下のようにパッケージをモック化してしまうのが簡単な回避方法です。jest の setup ファイルに書いておくのも良いです。

jest.mock("@react-native-async-storage/async-storage", () => jest.fn);

ライブラリの動作はキーを渡して該当するデータを取得するものです。特にロジックは含まないのでモックにして問題ないです。

取得したデータの整形やチェックする処理があるのであれば、その部分を切り出したり、テストデータを返すモックを用意するなどしてテストを行うようにしましょう。

`react-native-safe-area-context` のエラーを回避する

こちらは使用の際に要素を SafeAreaProvider で囲んでおく必要があります。

以下のような test-utils.tsx を用意しておきましょう。 @testing-library/react-native の変わりにこれを import することで、Provider を用意してコンポーネントをレンダーできます。もちろん、各テストで Provider を挟んで定義するのでも問題ないです。

import React from "react";
import { render } from "@testing-library/react-native";
import { SafeAreaProvider } from "react-native-safe-area-context";

function TestSafeAreaProvider({ children }) {  return (    <SafeAreaProvider      initialMetrics={{        frame: { x: 0, y: 0, width: 0, height: 0 },        insets: { top: 0, left: 0, right: 0, bottom: 0 },      }}>      {children}    </SafeAreaProvider>  );}
const customRender = (ui, options?) => {
  return render(ui, { wrapper: TestSafeAreaProvider, ...options });
};

// re-export everything
export * from "@testing-library/react-native";

// override render method
export { customRender as render };

この SafeAreaProvider に initialMetrics を設定しないと、要素が何もレンダリングされない現象になるので注意しましょう。

パッケージに用意されているデフォルト値を使った場合もレンダリングできない現象がおきました。適当な値でいいので自分でオブジェクトを用意して設定する必要があります。

おわりに

React Native でも jest を使ったテストは快適に行えます。ロジックの部分を切り分けることでテストが書きやすくなるのは間違いないので、まずはそれを検討しましょう。今回のようにどうしてもコンポーネントから切り出せない場合や、ページ全体など大きな部分のテストになると、パッケージのモック化が必要になります。

jest のモックはさまざまな使い方や定義が可能なので、時間がある時に知っておくとテスト実装が快適になるのでおすすめです。