如何為全域載入指示器建立和測試 React 查詢掛鉤-js教程-PHP中文網

How to Create and Test a React Query Hook for Global Loading Indicators

React Query 是一個強大的工具，用於處理 React 應用程式中的資料擷取、快取和同步。在本文中，我們將使用 React Query 的 useIsFetching、useIsMutating 和 useIsRestoring 函數建立一個自訂掛鉤，以確定是否有任何服務呼叫處於掛起狀態，從而允許我們管理全域載入狀態並顯示指示器。然後，我們將使用 Jest 編寫單元測試，以確保掛鉤按預期工作。

先決條件

在我們開始之前，請確保您已安裝以下軟體：

React 查詢 (@tanstack/react-query)
開玩笑（用於測試）
用於測試鉤子的 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 測試庫的 renderHook 實用程式在測試環境中渲染我們的鉤子。

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

登入後複製

測試說明

模擬依賴關係：
- 我們使用 jest.mock 來模擬函式 useIsFetching、useIsMutating 和 useIsRestoring。
- 模擬允許我們模擬不同的返回值並控制測試期間的行為。
測試案例：
- 預設模式：
  - ('all')：如果所有狀態都為零或 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;

登入後複製

您應該看到指示所有測試已通過的輸出。