React Nativeでjestを使ってスナップショットテストを行う

React Natvie でも jest を用いることで簡単にテストを準備できます。

今回はReact Nativeにおける、 jest のセットアップとスナップショットテストの実施についての説明です。 jestを使えば大規模な開発はもちろん個人開発など小さなプロジェクトでもテストを簡単に取り入れるられます。テストによる恩恵は大きいのでぜひ身につけておきたい知識です。

jest ではユニットテストも行うことができるのですが、いくつか関連ライブラリを利用することになりますので別の機会に説明します。

概要

React Native での jest を使ったスナップショットテストの導入方法です。

• ドキュメント
• インストール
• テストコード
• テストの実施
• 結果
• Expo を利用する場合

ドキュメント

https://jestjs.io/docs/ja/tutorial-react-native

インストール

以下コマンドでインストールします。

npm install --save-dev jest
npm install --save-dev react-test-renderer

package.json に以下のコマンドエイリアスを登録しておきましょう。

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "preset": "react-native"
  }
}

以下コマンドを実行することで jest の設定ファイルを作成することもできます。

jest --init

react-native initにて作成したプロジェクトの場合は、セットアップ済みなので初めから利用可能です。

テストコード

テストコードは基本的に「__test__」に書いていきましょう。ソースコードとは分けておくことで管理がしやすくなります。 ソースコードとディレクトリの構成を合わせると管理しやすいです。

例えば__test__/components/header.test.jsを作成して、ヘッダーコンポーネントのスナップショットテストを定義します。

import React from 'react';
import Header from '../components/header';

import renderer from 'react-test-renderer';

test('header snapshot', () => {
  const tree = renderer.create(<Header />).toJSON();
  expect(tree).toMatchSnapshot();
});

スナップショットテストなのでtoMatchSnapshot()を実行します。他にもいくつも比較メソッドがあります。必要に応じて使い分けてユニットテストなどの実装が可能です。

テストの実施

以下コマンドでテストを実行します。

npm run test

問題なく実行できればテストは完了し結果が表示されます。

コンポーネントが正しくレンダリング出来ない場合などは、コンポーネントに引数を渡すなど工夫が必要になります。 Redux やナビゲーションが必要なときなどテストが難しくなるパターンも有りますが、大抵の場合はテストの記述が出来ます。

できる限りシンプルなコンポーネントを目指すことで、テストがしやすくなり管理も簡単になるので心がけると良いです。

結果

いくつのテストが行われ、いくつ成功・いくつ失敗したのかが記述されます。 テストで取得したスナップショットは__test__/__snapshots__/内に保存されます。

今回行っているのはスナップショットテストです。 正常にスナップショットが取得できなかった場合以外にも、前回のスナップショットと差分をチェックして差異がある場合も失敗として扱われます。

テストを通過できなかった箇所が、開発者の意図どおりであれば問題ありません。 その場合は、スナップショットを更新するようにオプションをつけて再度テストを実行します。

npm run test -- -u

意図してない場所に影響がある場合は、必要に応じて修正を行いましょう。

Expo を利用する場合

Expo を利用する場合はjest-expoを利用するのが推奨されています。 基本的にテスト記述などは同様に使うことができます。

ドキュメント

https://docs.expo.io/versions/v36.0.0/guides/testing-with-jest/

インストール

以下コマンドでインストールします。

npm install --save-dev jest-expo
npm install --save-dev react-test-renderer

package.json

以下のように設定しておきましょう。

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

おわりに

jest を用いることで簡単にテストを行うことが出来ました。今回説明したテストはスナップショットテストとなっています。 前回の構築から変更されたコンポーネントをわかるようにして、意図的に変更した所以外に影響が無いかをチェックできます。

直接変更を加えてコード以外の場所で、思わぬところに影響が出たとか動かなくなったということを未然に防ぐことができます。

jest と他のライブラリを合わせることで、詳細にユニットテストを実装することもできます。今後ユニットテストの方法についても紹介します。