ホームページ > 記事 > ウェブフロントエンド > jest を使用してプロジェクト内のネイティブコンポーネントをテストする方法

jest を使用してプロジェクト内のネイティブコンポーネントをテストする方法

小云云オリジナル: 2018-02-11 09:36:561722ブラウズ

現在、多くの Javascript テストツールがありますが、React テスト戦略では、Facebook が立ち上げた ReactJ の標準テストツールは、Jest.Jest の公式 Web サイトアドレス: https://facebook.github.io/jest/ です。 Jest 公式 Web サイトでは、「Painless JavaScript Testing」と主張していることがわかります。サービスと React アプリケーションをテストするための Facebook の JavaScript 単体テストフレームワークです。この記事では、jest を使用してプロジェクト内の React Native コンポーネントをテストする方法を主に紹介し、皆様の参考にさせていただきます。

いわゆる単体テストは、一般的に各ユニットをテストすることであり、一般に関数、クラス、または個々のコンポーネントを対象とし、システムや統合は関与しません。単体テストはソフトウェアテストの基本的なテストです。 Jest には主に次の機能があります:

適応性: Jest はモジュール式で、拡張可能、構成可能です。
サンドボックスと高速: Jest は JavaScript 環境を仮想化し、ブラウザーをシミュレートし、並列実行できます
スナップショットテスト: Jest は React ツリーまたはその他のシリアル化された値のスナップショットを取得して、テストをすばやく作成し、迅速に実行できます。ユーザーエクスペリエンスを更新しました。
非同期コードテストをサポート: Promise と async/await をサポート
静的分析結果を自動的に生成: テストケースの実行結果を表示するだけでなく、ステートメント、分岐、関数などのカバレッジも表示します。

なぜ単体テストツールを使用する必要があるのか

開発プロセス中は、テストツールを使用せずに単体テスト用の独自のコードを書くこともできますが、コードには相互呼び出し関係があり、テストプロセス中は次のようになります。ユニットを比較的独立させて正常に実行するには、テスト対象の関数の依存関数と環境をモックする必要があります。テストデータの入力、テストの実行、テスト結果の確認には多くの類似点があります。テストツールは私たちのためのものです。これらの側面により利便性がもたらされます。

準備フェーズ

では、rn プロジェクトが必要です。ここで示しているのは、私の個人プロジェクト ReactNative-ReduxSaga-TODO です

jest をインストールします

React-native init コマンドラインを使用して rn プロジェクトを作成した場合は、 rn バージョンが 0.38 以降の場合、インストールする必要はありません。よくわからない場合は、

package.json ファイルに次のコードが含まれているかどうかを確認してください:

 // package.json
 "scripts": {
  "test": "jest"
 },
 "jest": {
  "preset": "react-native"
 }

含まれていない場合は、npm i jest --save-dev をインストールし、上記のコードをpackage.jsonファイルの対応位置。

上記の手順を完了したら、npm run test を実行して、jest が正常に設定されているかどうかをテストします。しかし、テストケースを作成していないため、ターミナルは見つからないテストを出力します。これで設定は完了です。

スナップショットテスト

コンポーネントを作成します

import React from &#39;react&#39;;
import {
 Text, View,
} from &#39;react-native&#39;;

import PropTypes from &#39;prop-types&#39;;

const PostArea = ({ title, text, color }) => (
 <View style={{ backgroundColor: &#39;#ddd&#39;, height: 100 }}>
  <Text style={{ fontSize: 30 }}>{title}</Text>
  <Text style={{ fontSize: 15, color }}>{text}</Text>
 </View>
);

export default PostArea;

次に、React のテストレンダラーと Jest のスナップショット機能を使用してコンポーネントを操作し、レンダリングされた出力をキャプチャしましょう。そしてスナップショットファイルを作成します。

// PostArea_test.js
import &#39;react-native&#39;;
import React from &#39;react&#39;;
import PostArea from &#39;../js/Twitter/PostArea&#39;;

import renderer from &#39;react-test-renderer&#39;;

test(&#39;renders correctly&#39;, () => {
 const tree = renderer.create(<PostArea title="title" text="text" color="red" />).toJSON();
 expect(tree).toMatchSnapshot();
});

次に、ターミナルで npm run test または jest を実行します。出力:

PASS __tests__PostArea_test.js (6.657s)
√ 正しくレンダリングされます (5553ms)

› 1 つのスナップショットが書き込まれました。
スナップショットの概要
› 1 つのスナップショットが 1 つのテストスイートに書き込まれました。

テストスイート: 1 合格、1合計
テスト: 1 パス、合計 1
スナップショット: 1 追加、合計 1
時間: 8.198 秒
すべてのテストスイートを実行しました。

同時に、生成されたファイルがテストフォルダーに出力されます。スナップショット。

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `
<View
 style={
  Object {
   "backgroundColor": "#ddd",
   "height": 100,
  }
 }
>
 <Text
  accessible={true}
  allowFontScaling={true}
  disabled={false}
  ellipsizeMode="tail"
  style={
   Object {
    "fontSize": 30,
   }
  }
 >
  title
 </Text>
 <Text
  accessible={true}
  allowFontScaling={true}
  disabled={false}
  ellipsizeMode="tail"
  style={
   Object {
    "color": "red",
    "fontSize": 15,
   }
  }
 >
  text
 </Text>
</View>
`;

ソースファイルを変更します

次回テストを実行するときに、レンダリングされた出力が以前に作成されたスナップショットと比較されます。スナップショットはコードと一緒に提出する必要があります。スナップショットテストが失敗した場合は、意図的または非意図的な変更がないかどうかをチェックする必要があります。変更が予想どおりの場合は、 jest -u を呼び出して現在のスナップショットを上書きします。

元のコードを変更しましょう: 2 行目ののフォントサイズを 14 に変更します。

<Text style={{ fontSize: 14, color }}>{text}</Text>

この時点で、jest を再度実行します。この時、ターミナルはエラーをスローしてエラー箇所を指摘します

このコードは意図的に変更したものなので、 jest -u を実行するとスナップショットが上書きされてしまいます。 jestを再度実行すると、エラーは報告されません~

jest を使用してプロジェクト内のネイティブ コンポーネントをテストする方法

関連記事

jest を使用してプロジェクト内のネイティブコンポーネントをテストする方法