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

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

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

1. 適応性: Jest はモジュール式で、拡張可能、構成可能です。

2. サンドボックスと高速: Jest は JavaScript 環境を仮想化し、ブラウザーをシミュレートし、並列実行できます

3. スナップショット テスト: Jest は React ツリーまたはその他のシリアル化された値のスナップショットを取得して、テストをすばやく作成し、迅速に実行できます。ユーザーエクスペリエンスを更新しました。

4. 非同期コードテストをサポート: Promise と async/await をサポート

5. 静的分析結果を自動的に生成: テストケースの実行結果を表示するだけでなく、ステートメント、分岐、関数などのカバレッジも表示します。

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

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

準備フェーズ

では、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 'react';
import {
 Text, View,
} from 'react-native';

import PropTypes from 'prop-types';

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 'react-native';
import React from 'react';
import PostArea from '../js/Twitter/PostArea';

import renderer from 'react-test-renderer';

test('renders correctly', () => {
 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を再度実行すると、エラーは報告されません~

関連する推奨事項:

ドロワーメニューコントロール効果を実装するためのReact Nativeカスタムコンポーネント

React NativeとWebview間の通信について

Reactネイティブ垂直カルーセルコンポーネント パッケージングの詳しい説明

以上がjest を使用してプロジェクト内のネイティブ コンポーネントをテストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。