如何为全局加载指示器创建和测试 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 步：创建自定义 Hook

首先，让我们创建一个名为 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中文网其他相关文章！