jest を使用してネイティブ コンポーネントに反応するテストの詳細な説明

この記事では主に、jest を使用してプロジェクト内のネイティブ コンポーネントをテストする方法を詳しく紹介します。

現在、多くの Javascript テスト ツールがありますが、React テスト戦略では、Facebook が立ち上げた ReactJ の標準テスト ツールは、Jest.Jest の公式 Web サイト アドレス: https://facebook.github.io/jest/ です。 Jest 公式 Web サイトでは、「Painless JavaScript Testing」と主張していることがわかります。サービスと React アプリケーションをテストするための Facebook の JavaScript 単体テスト フレームワークです。

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

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

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

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

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

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

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

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

準備フェーズ

ここで説明するのは私の個人的なプロジェクト 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 をインストールし、上記のコードをパッケージの対応する場所に追加します。 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を再度実行すると、エラーは報告されません~

上記は、皆さんのためにまとめたもので、将来皆さんのお役に立てれば幸いです。

関連記事:

vue-prop で親コンポーネントを使用して子コンポーネントに値を渡す方法

Cheerio を使用して Node.js で単純な Web クローラーを作成する (詳細なチュートリアル)

vue での方法複数のデータを子コンポーネントに渡す親コンポーネントを実装します

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