Cara Mencipta dan Menguji Cangkuk Pertanyaan React untuk Penunjuk Pemuatan Global

React Query ialah alat yang berkuasa untuk mengendalikan pengambilan data, caching dan penyegerakan dalam aplikasi React. Dalam artikel ini, kami akan membuat cangkuk tersuai menggunakan fungsi useIsFetching, useIsMutating, dan useIsRestoring Query React untuk menentukan sama ada sebarang panggilan perkhidmatan belum selesai, membolehkan kami mengurus keadaan pemuatan global dan menunjukkan penunjuk. Kemudian, kami akan menulis ujian unit menggunakan Jest untuk memastikan cangkuk berfungsi seperti yang diharapkan.

Prasyarat

Sebelum kita mula, pastikan anda telah memasang yang berikut:

• React Query (@tanstack/react-query)
• Jest (untuk ujian)
• Pustaka Pengujian React (@library-testing/react-hooks) untuk cangkuk ujian

Jika anda belum memasangnya, anda boleh menambahkannya melalui npm:

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

Langkah 1: Mencipta Cangkuk Tersuai

Mula-mula, mari buat cangkuk tersuai yang dipanggil useServiceConfig yang menyemak sama ada sebarang panggilan perkhidmatan belum selesai:

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;

Penjelasan

• useIsFetching(): Mengembalikan bilangan pertanyaan aktif yang sedang diambil.
• useIsMutating(): Mengembalikan bilangan mutasi yang berterusan (cth., POST, PUT, DELETE permintaan).
• useIsRestoring(): Semak sama ada React Query sedang memulihkan cache daripada storan.

Kami menggabungkan nilai ini menggunakan useMemo untuk menentukan sama ada mana-mana nilai tersebut menunjukkan keadaan belum selesai. Cangkuk kemudian mengembalikan tuple yang mengandungi nilai boolean ini.

Kami menggunakan fungsi ini untuk menentukan sama ada sebarang panggilan perkhidmatan belum selesai. Jika mana-mana fungsi ini mengembalikan nilai yang lebih besar daripada 0, kami menetapkan isPending kepada benar.

Langkah 2: Menulis Ujian Unit

Sekarang kita mempunyai cangkuk, mari tulis ujian unit menggunakan Jest untuk memastikan ia berkelakuan seperti yang diharapkan.

Menyediakan Ujian

Buat fail yang dipanggil useServiceConfig.test.ts (atau .js jika tidak menggunakan TypeScript). Kami akan menggunakan utiliti renderHook Library React Testing untuk memaparkan cangkuk kami dalam persekitaran ujian.

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

Penjelasan Ujian

• Ketergantungan Mengejek:
  • Kami menggunakan jest.mock untuk mengejek fungsi useIsFetching, useIsMutating, dan useIsRestoring.
  • Mengejek membolehkan kami mensimulasikan nilai pulangan yang berbeza dan mengawal tingkah laku semasa ujian.
• Kes Ujian:
  • Mod Lalai:
    • ('semua'): Jika semua status sifar atau palsu, cangkuk harus kembali palsu.
  • Mod Khusus:
    • 'mengambil': Jika useIsFetching mengembalikan nilai yang lebih besar daripada 0, cangkuk harus kembali benar.
    • 'mutasi': Jika useIsMutating mengembalikan nilai yang lebih besar daripada 0, cangkuk harus kembali benar.
    • 'memulihkan': Jika useIsRestoring mengembalikan benar, cangkuk juga harus kembali benar.

• Menjalankan Ujian:

  • Jalankan ujian menggunakan 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;
    

    Anda sepatutnya melihat output yang menunjukkan semua ujian telah lulus.

Kesimpulan

Dalam artikel ini, kami membina cangkuk React Query tersuai yang menyemak status panggilan perkhidmatan berdasarkan mod yang berbeza (mengambil, bermutasi, memulihkan atau semua). Kami kemudian menulis dan menjalankan ujian menggunakan Jest untuk memastikan cangkuk kami berfungsi dengan betul dalam pelbagai senario. Pendekatan ini membantu mengurus keadaan pemuatan global, menjadikannya lebih mudah untuk menunjukkan penunjuk dalam aplikasi anda.

Dengan mengikuti langkah ini, anda boleh membuat cangkuk yang serupa untuk kes penggunaan yang berbeza dan mengujinya dengan yakin.

Langkah Seterusnya

• Cuba panjangkan cangkuk untuk menerima parameter lain, seperti kekunci pertanyaan khusus, untuk menyesuaikan tingkah lakunya dengan lebih lanjut.
• Terokai lebih banyak utiliti React Query untuk meningkatkan prestasi aplikasi dan pengalaman pengguna anda.

Selamat mengekod!

Atas ialah kandungan terperinci Cara Mencipta dan Menguji Cangkuk Pertanyaan React untuk Penunjuk Pemuatan Global. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!