如何為全域載入指示器建立和測試 React 查詢掛鉤

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;
    

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

結論

在本文中，我們建立了一個自訂 React Query 掛鉤，用於根據不同模式（獲取、變異、恢復或全部）檢查服務呼叫的狀態。然後，我們使用 Jest 編寫並運行測試，以確保我們的鉤子在各種場景下都能正確運行。這種方法有助於管理全域載入狀態，從而更輕鬆地在應用程式中顯示指示器。

透過遵循這些步驟，您可以為不同的用例建立類似的鉤子並自信地測試它們。

下一步

• 嘗試擴充鉤子以接受其他參數，例如特定的查詢鍵，以進一步自訂其行為。
• 探索更多 React Query 實用程序，以增強應用程式的效能和使用者體驗。

編碼愉快！

以上是如何為全域載入指示器建立和測試 React 查詢掛鉤的詳細內容。更多資訊請關注PHP中文網其他相關文章！