Comment créer et tester un hook de requête React pour les indicateurs de chargement globaux

React Query est un outil puissant pour gérer la récupération, la mise en cache et la synchronisation des données dans les applications React. Dans cet article, nous allons créer un hook personnalisé à l'aide des fonctions useIsFetching, useIsMutating et useIsRestoring de React Query pour déterminer si un appel de service est en attente, nous permettant ainsi de gérer les états de chargement globaux et d'afficher des indicateurs. Ensuite, nous écrirons des tests unitaires en utilisant Jest pour nous assurer que le hook fonctionne comme prévu.

Conditions préalables

Avant de commencer, assurez-vous que les éléments suivants sont installés :

• Requête React (@tanstack/react-query)
• Blague (pour tester)
• Bibliothèque de tests React (@testing-library/react-hooks) pour tester les hooks

Si vous ne les avez pas installés, vous pouvez les ajouter via npm :

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

Étape 1 : Création du hook personnalisé

Tout d'abord, créons un hook personnalisé appelé useServiceConfig qui vérifie si un appel de service est en attente :

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;

Explication

• useIsFetching() : renvoie le nombre de requêtes actives en cours de récupération.
• useIsMutating() : renvoie le nombre de mutations en cours (par exemple, requêtes POST, PUT, DELETE).
• useIsRestoring() : vérifie si React Query restaure le cache à partir du stockage.

Nous combinons ces valeurs à l'aide de useMemo pour déterminer si l'une d'entre elles indique un état en attente. Le hook renvoie ensuite un tuple contenant cette valeur booléenne.

Nous utilisons ces fonctions pour déterminer si un appel de service est en attente. Si l'une de ces fonctions renvoie une valeur supérieure à 0, nous définissons isPending sur true.

Étape 2 : écriture de tests unitaires

Maintenant que nous avons notre hook, écrivons des tests unitaires en utilisant Jest pour nous assurer qu'il se comporte comme prévu.

Configuration des tests

Créez un fichier appelé useServiceConfig.test.ts (ou .js si vous n'utilisez pas TypeScript). Nous utiliserons l'utilitaire renderHook de React Testing Library pour restituer notre hook dans un environnement de test.

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

Explication des tests

• Dépendances moqueuses :
  • Nous utilisons jest.mock pour nous moquer des fonctions useIsFetching, useIsMutating et useIsRestoring.
  • Mocking nous permet de simuler différentes valeurs de retour et de contrôler le comportement lors des tests.
• Cas de test :
  • Mode par défaut :
    • (« all ») : si tous les statuts sont nuls ou faux, le hook doit renvoyer false.
  • Modes spécifiques :
    • 'fetching' : si useIsFetching renvoie une valeur supérieure à 0, le hook doit renvoyer true.
    • 'mutating' : Si useIsMutating renvoie une valeur supérieure à 0, le hook doit renvoyer true.
    • 'restoring' : Si useIsRestoring renvoie true, le hook devrait également renvoyer true.

• Exécution des tests :

  • Exécutez les tests en utilisant 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;
    

    Vous devriez voir un résultat indiquant que tous les tests ont réussi.

Conclusion

Dans cet article, nous avons créé un hook React Query personnalisé qui vérifie l'état des appels de service en fonction de différents modes (récupération, mutation, restauration ou tous). Nous avons ensuite écrit et exécuté des tests à l'aide de Jest pour nous assurer que notre hook se comporte correctement dans divers scénarios. Cette approche permet de gérer les états de chargement globaux, facilitant ainsi l'affichage des indicateurs dans votre application.

En suivant ces étapes, vous pouvez créer des hooks similaires pour différents cas d'utilisation et les tester en toute confiance.

Prochaines étapes

• Essayez d'étendre le hook pour accepter d'autres paramètres, tels que des clés de requête spécifiques, afin de personnaliser davantage son comportement.
• Découvrez davantage d'utilitaires de React Query pour améliorer les performances et l'expérience utilisateur de votre application.

Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!