グローバル読み込みインジケーター用の React クエリ フックを作成してテストする方法

React Query は、React アプリケーションでデータのフェッチ、キャッシュ、同期を処理するための強力なツールです。この記事では、React Query の useIsFetching、useIsMutating、および useIsRestoring 関数を使用してカスタム フックを作成し、保留中のサービス呼び出しがあるかどうかを判断し、グローバルな読み込み状態を管理し、インジケーターを表示できるようにします。次に、Jest を使用して単体テストを作成し、フックが期待どおりに動作することを確認します。

前提条件

始める前に、以下がインストールされていることを確認してください:

• クエリへの反応 (@tanstack/react-query)
• Jest (テスト用)
• フックをテストするための React テスト ライブラリ (@testing-library/react-hooks)

これらがインストールされていない場合は、npm 経由で追加できます:

npm install @tanstack/react-query @testing-library/react-hooks jest

ステップ 1: カスタムフックの作成

まず、保留中のサービス呼び出しがあるかどうかを確認する useServiceConfig というカスタム フックを作成しましょう。

import { useIsFetching, useIsMutating, useIsRestoring } from '@tanstack/react-query';
import { useMemo } from 'react';

const modes = {
    fetching: 'fetching',
    mutating: 'mutating',
    restoring: 'restoring',
    all: 'all',
} as const;

type TMode = keyof typeof modes;

/**
 * @name useServiceConfig
 * @description A custom hook that returns a boolean value indicating if any service call is pending.
 * @param {TMode} mode The mode to check for pending service calls. Default is `'all'`.
 * @returns {readonly [boolean]} A tuple containing a single boolean value indicating if any service call is pending.
 */
const useServiceConfig = (mode: TMode = modes.all): readonly [boolean] => {
    const isFetching = useIsFetching();
    const isMutating = useIsMutating();
    const isRestoring = useIsRestoring();

    const isPending = useMemo(() => {
        switch (mode) {
            case modes.fetching:
                return isFetching > 0;
            case modes.mutating:
                return isMutating > 0;
            case modes.restoring:
                return isRestoring;
            case modes.all:
            default:
                return isFetching > 0 || isMutating > 0 || isRestoring;
        }
    }, [mode, isFetching, isMutating, isRestoring]);

    return [isPending] as const;
};

export default useServiceConfig;

説明

• useIsFetching(): 現在フェッチされているアクティブなクエリの数を返します。
• useIsMutating(): 進行中の変更 (POST、PUT、DELETE リクエストなど) の数を返します。
• useIsRestoring(): React Query がストレージからキャッシュを復元しているかどうかを確認します。

useMemo を使用してこれらの値を結合し、保留状態を示す値があるかどうかを判断します。その後、フックはこのブール値を含むタプルを返します。

これらの関数を使用して、保留中のサービス呼び出しがあるかどうかを判断します。これらの関数のいずれかが 0 より大きい値を返した場合、isPending を true に設定します。

ステップ 2: 単体テストを作成する

フックができたので、Jest を使用して単体テストを作成して、期待どおりに動作することを確認しましょう。

テストのセットアップ

useServiceConfig.test.ts (TypeScript を使用しない場合は .js) というファイルを作成します。 React Testing Library の renderHook ユーティリティを使用して、テスト環境でフックをレンダリングします。

npm install @tanstack/react-query @testing-library/react-hooks jest

テストの説明

• 依存関係のモック:
  • jest.mock を使用して関数 useIsFetching、useIsMutating、useIsRestoring をモックします。
  • モックを使用すると、さまざまな戻り値をシミュレートし、テスト中の動作を制御できます。
• テストケース:
  • デフォルトモード:
    • ('all'): すべてのステータスが 0 または false の場合、フックは false を返す必要があります。
  • 特定のモード:
    • 'fetching': useIsFetching が 0 より大きい値を返した場合、フックは true を返す必要があります。
    • 'mutating': useIsMutating が 0 より大きい値を返した場合、フックは true を返す必要があります。
    • 'restoring': useIsRestoring が true を返す場合、フックも true を返す必要があります。

• テストの実行:

  • Jest を使用してテストを実行します:
    

    import { useIsFetching, useIsMutating, useIsRestoring } from '@tanstack/react-query';
    import { useMemo } from 'react';
    
    const modes = {
        fetching: 'fetching',
        mutating: 'mutating',
        restoring: 'restoring',
        all: 'all',
    } as const;
    
    type TMode = keyof typeof modes;
    
    /**
     * @name useServiceConfig
     * @description A custom hook that returns a boolean value indicating if any service call is pending.
     * @param {TMode} mode The mode to check for pending service calls. Default is `'all'`.
     * @returns {readonly [boolean]} A tuple containing a single boolean value indicating if any service call is pending.
     */
    const useServiceConfig = (mode: TMode = modes.all): readonly [boolean] => {
        const isFetching = useIsFetching();
        const isMutating = useIsMutating();
        const isRestoring = useIsRestoring();
    
        const isPending = useMemo(() => {
            switch (mode) {
                case modes.fetching:
                    return isFetching > 0;
                case modes.mutating:
                    return isMutating > 0;
                case modes.restoring:
                    return isRestoring;
                case modes.all:
                default:
                    return isFetching > 0 || isMutating > 0 || isRestoring;
            }
        }, [mode, isFetching, isMutating, isRestoring]);
    
        return [isPending] as const;
    };
    
    export default useServiceConfig;
    

    すべてのテストが成功したことを示す出力が表示されます。

結論

この記事では、さまざまなモード (フェッチ、変更、復元、またはすべて) に基づいてサービス呼び出しのステータスをチェックするカスタム React Query フックを構築しました。次に、Jest を使用してテストを作成して実行し、フックがさまざまなシナリオで正しく動作することを確認しました。このアプローチは、グローバルな読み込み状態の管理に役立ち、アプリケーションでのインジケーターの表示が容易になります。

これらの手順に従うことで、さまざまなユースケースに同様のフックを作成し、自信を持ってテストできます。

次のステップ

• 動作をさらにカスタマイズするには、特定のクエリ キーなどの他のパラメーターを受け入れるようにフックを拡張してみてください。
• React Query のユーティリティをさらに探索して、アプリケーションのパフォーマンスとユーザー エクスペリエンスを向上させます。

コーディングを楽しんでください!

以上がグローバル読み込みインジケーター用の React クエリ フックを作成してテストする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。