テストネイティブのテストライブラリでフックフックフォームを反応させる

私は両方のウェブの反応フック形式を使用して、単一の問題なしでネイティブに反応します.グレートライブラリ.フックフックv 6を使用する場合.検証が完全にコードで動作する問題に遭遇しましたが、テストでは、エラーオブジェクトは間違った値であっても常に空です.それを解決する方法を見ましょう.このブログでは、Jest Expoを通して1つのテストの中でIOSとAndroidの両方に反応するネイティブのテストライブラリで、反応フック形式をテストする方法をデモします.

プロジェクトのセットアップ

私はエキスポを使用して迅速なデモを行います.

# select blank template, JS or TS
expo init test-rhf

cd test-rhf
yarn add react-hook-form
yarn add --dev react-native-testing-library jest-expo

ジェストEXPOは、万博チームからここで普遍的なテストを行うには、ライブラリをテストするすべてのプラットフォームのためのテストを実行するには、ここでは、ネイティブのテストライブラリをネイティブのデバイスをサポートしていますので、我々は、Webのセットアップを使用して、Expertのファイルの拡張子を拾うと、ネイティブのテストライブラリと@ testライブラリ/反応の間の類似性を使用しないでください.両方のWebとネイティブデバイスの共有1つのテストファイルを簡単にする必要があります、後で試してみてください.
インパッケージ.JSON :

スクリプトを追加します

Jest設定を追加します.

"jest": {
    "projects": [
      {
        "preset": "jest-expo/ios",
        "setupFilesAfterEnv": [
          "<rootDir>/jestAfterEnvSetup.js"
        ]
      },
      {
        "preset": "jest-expo/android",
        "setupFilesAfterEnv": [
          "<rootDir>/jestAfterEnvSetup.js"
        ]
      }
    ]
  }

任意のJEST規則を書き換える場合は、上記の例のように、各プラットフォームごとに新しいルールを記述する必要があります.
jestafterEnvsetupを作成します.js

global.window = {};
global.window = global;

TypesScriptを使っているなら、上記の行を無視する必要があるかもしれません

2 .テストへの適用

アプリを変更します.以下のJS :

import React from "react";
import { Text, Button, TextInput, View } from "react-native";
import { useForm, Controller } from "react-hook-form";

export default function App() {
  const { errors, control, handleSubmit } = useForm({
    defaultValues: { name: "" },
  });

  const errorText = errors["name"]?.message;
  const isError = Boolean(errorText);

  return (
    <View style={{ margin: 10 }}>
      <Controller
        control={control}
        render={({ onChange, onBlur, value }) => (
          <TextInput
            style={{ borderColor: "black" }}
            testID="nameInput"
            onChangeText={onChange}
            onBlur={onBlur}
            value={value}
          />
        )}
        rules={{ required: "name can't be blank" }}
        name="name"
      />

      {isError && <Text testID="nameErrorText">{errorText}</Text>}

      <Button
        testID="submitButton"
        title="submit"
        onPress={handleSubmit(async ({ name }) => {
          console.log(name);
        })}
      />
    </View>
  );
}

私たちはここに簡単なフォームを、1つのテキスト入力のための、それが必要です、1つの送信ボタンを値を送信するために必要です.
エキスポスタートは、この醜いアプリケーションを表示されますが、空白の入力を送信ボタンを押すとエラーにつながるでしょう.
エラーテキストから"name "というエラーテキストを抽出します.メッセージをチェックするためにboolean(ErrorText)を使用する場合、エラーテキストがある場合、エラーが発生します.

3 .テスト

ファイルアプリケーションを作成します.テスト.アプリの同じレベルでのJS.以下の内容を持つjs

import * as React from "react";
import App from "./App";
import { render, fireEvent, act } from "react-native-testing-library";

it("should not trigger error for correct values", async () => {
  const { getByTestId, queryByTestId } = render(<App />);

  fireEvent.changeText(getByTestId("nameInput"), "ABCDEFG");

  await act(async () => {
    fireEvent.press(getByTestId("submitButton"));
  });

  expect(queryByTestId("nameErrorText")).not.toBeTruthy();
});

it("should trigger error for empty input", async () => {
  const { getByTestId, queryByTestId } = render(<App />);

  await act(async () => {
    fireEvent.press(getByTestId("submitButton"));
  });

  expect(queryByTestId("nameErrorText")).toBeTruthy();
});

我々はここで2つのテストを持っている、幸せなパスのための1つ、不幸なパスの1つ.
ユーザーの振る舞いを模倣します.
幸せパスについて:値があれば、nameErrorTextは表示されません.
不幸なパスについては、値がない場合は、NameErrorTextを表示する必要があります.
テストはかなり読みやすいはずです.ここでは説明しません.
興味深いのは、

await act(async () => {
  fireEvent.press(getByTestId("submitButton"));
});

Action ( async ()>>)を押す必要があるのはなぜですか?これは反応フック形式での検証が常に非同期であるため、終了するまで待機する必要があります.(これは実世界での検証がコスティになる可能性があるためです).
ACD ()をラップするのを忘れるならば、あなたは赤い警告を見ます:警告:テストの中のAPPへの更新はACT(...)で包まれませんでした

4 .終わり

ランヤーンテストを実行すると、すべてのテストパスが表示されます.
読書ありがとう!それが助ける望み.
あなたが私の面白い考えについてもっと聞きたいならば、さえずりの上で私(Albertgao)に続いてください.