So erstellen und testen Sie einen React Query Hook für globale Ladeindikatoren

React Query ist ein leistungsstarkes Tool zum Abrufen, Zwischenspeichern und Synchronisieren von Daten in React-Anwendungen. In diesem Artikel erstellen wir einen benutzerdefinierten Hook mithilfe der Funktionen „useIsFetching“, „useIsMutating“ und „useIsRestoring“ von React Query, um zu ermitteln, ob ein Serviceaufruf aussteht, sodass wir globale Ladezustände verwalten und Indikatoren anzeigen können. Anschließend schreiben wir Unit-Tests mit Jest, um sicherzustellen, dass der Hook wie erwartet funktioniert.

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass Folgendes installiert ist:

• Abfrage reagieren (@tanstack/react-query)
• Scherz (zum Testen)
• React Testing Library (@testing-library/react-hooks) zum Testen von Hooks

Wenn Sie diese nicht installiert haben, können Sie sie über npm:
hinzufügen

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

Schritt 1: Erstellen des benutzerdefinierten Hooks

Erstellen wir zunächst einen benutzerdefinierten Hook namens „useServiceConfig“, der prüft, ob ein Serviceaufruf aussteht:

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;

Erläuterung

• useIsFetching(): Gibt die Anzahl der aktiven Abfragen zurück, die derzeit abgerufen werden.
• useIsMutating(): Gibt die Anzahl der laufenden Mutationen zurück (z. B. POST-, PUT-, DELETE-Anfragen).
• useIsRestoring(): Prüft, ob React Query den Cache aus dem Speicher wiederherstellt.

Wir kombinieren diese Werte mithilfe von useMemo, um festzustellen, ob einer von ihnen einen ausstehenden Status anzeigt. Der Hook gibt dann ein Tupel zurück, das diesen booleschen Wert enthält.

Wir verwenden diese Funktionen, um festzustellen, ob ein Serviceabruf ansteht. Wenn eine dieser Funktionen einen Wert größer als 0 zurückgibt, setzen wir isPending auf true.

Schritt 2: Unit-Tests schreiben

Da wir nun unseren Haken haben, schreiben wir Unit-Tests mit Jest, um sicherzustellen, dass es sich wie erwartet verhält.

Einrichten der Tests

Erstellen Sie eine Datei mit dem Namen useServiceConfig.test.ts (oder .js, wenn Sie TypeScript nicht verwenden). Wir verwenden das renderHook-Dienstprogramm der React Testing Library, um unseren Hook in einer Testumgebung zu rendern.

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

Erläuterung der Tests

• Verspottende Abhängigkeiten:
  • Wir verwenden jest.mock, um die Funktionen useIsFetching, useIsMutating und useIsRestoring zu verspotten.
  • Mocking ermöglicht es uns, verschiedene Rückgabewerte zu simulieren und das Verhalten während Tests zu steuern.
• Testfälle:
  • Standardmodus:
    • ('all'): Wenn alle Status null oder falsch sind, sollte der Hook false zurückgeben.
  • Spezifische Modi:
    • 'fetching': Wenn useIsFetching einen Wert größer als 0 zurückgibt, sollte der Hook true zurückgeben.
    • 'mutating': Wenn useIsMutating einen Wert größer als 0 zurückgibt, sollte der Hook true zurückgeben.
    • 'restoreing': Wenn useIsRestoring true zurückgibt, sollte der Hook auch true zurückgeben.

• Durchführen der Tests:

  • Führen Sie die Tests mit Jest aus:
    

    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;
    

    Sie sollten eine Ausgabe sehen, die angibt, dass alle Tests bestanden wurden.

Abschluss

In diesem Artikel haben wir einen benutzerdefinierten React Query-Hook erstellt, der den Status von Serviceaufrufen basierend auf verschiedenen Modi (Abrufen, Mutieren, Wiederherstellen oder alle) überprüft. Anschließend haben wir mit Jest Tests geschrieben und durchgeführt, um sicherzustellen, dass sich unser Hook in verschiedenen Szenarien korrekt verhält. Dieser Ansatz hilft bei der Verwaltung globaler Ladezustände und erleichtert die Anzeige von Indikatoren in Ihrer Anwendung.

Indem Sie diese Schritte befolgen, können Sie ähnliche Hooks für verschiedene Anwendungsfälle erstellen und diese sicher testen.

Nächste Schritte

• Versuchen Sie, den Hook zu erweitern, um andere Parameter wie bestimmte Abfrageschlüssel zu akzeptieren, um sein Verhalten weiter anzupassen.
• Entdecken Sie weitere Dienstprogramme von React Query, um die Leistung und Benutzererfahrung Ihrer Anwendung zu verbessern.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonSo erstellen und testen Sie einen React Query Hook für globale Ladeindikatoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!