jest が反応ネイティブ コンポーネントをテストする手順は何ですか?

今回は、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 testingPostArea_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 を再度実行すると、エラーは報告されません~

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JS テキストの断続的なループ スクロール効果を実現する方法

JS のノードに新しい要素を追加する

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