전역 로딩 표시기에 대한 React 쿼리 후크를 만들고 테스트하는 방법

React Query는 React 애플리케이션에서 데이터 가져오기, 캐싱 및 동기화를 처리하기 위한 강력한 도구입니다. 이 기사에서는 React Query의 useIsFetching, useIsMutating 및 useIsRestoring 함수를 사용하여 서비스 호출이 보류 중인지 확인하여 전역 로딩 상태를 관리하고 표시기를 표시하는 사용자 정의 후크를 생성합니다. 그런 다음 후크가 예상대로 작동하는지 확인하기 위해 Jest를 사용하여 단위 테스트를 작성하겠습니다.

전제 조건

시작하기 전에 다음이 설치되어 있는지 확인하세요.

• 리액트 쿼리(@tanstack/react-query)
• Jest(테스트용)
• 테스트 후크를 위한 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 Testing Library의 renderHook 유틸리티를 사용하여 테스트 환경에서 후크를 렌더링하겠습니다.

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

테스트 설명

• 모의 종속성:
  • jest.mock을 사용하여 useIsFetching, useIsMutating 및 useIsRestoring 함수를 모의합니다.
  • 모의를 통해 다양한 반환 값을 시뮬레이션하고 테스트 중 동작을 제어할 수 있습니다.
• 테스트 사례:
  • 기본 모드:
    • ('all'): 모든 상태가 0 또는 false인 경우 후크는 false를 반환해야 합니다.
  • 특정 모드:
    • '가져오기': useIsFetching이 0보다 큰 값을 반환하는 경우 후크는 true를 반환해야 합니다.
    • 'mutating': useIsMutating이 0보다 큰 값을 반환하는 경우 후크는 true를 반환해야 합니다.
    • '복원': 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 쿼리 후크를 구축했습니다. 그런 다음 Jest를 사용하여 테스트를 작성하고 실행하여 후크가 다양한 시나리오에서 올바르게 작동하는지 확인했습니다. 이 접근 방식은 전역 로딩 상태를 관리하는 데 도움이 되며 애플리케이션에 표시기를 더 쉽게 표시할 수 있습니다.

이러한 단계를 따르면 다양한 사용 사례에 대해 유사한 후크를 만들고 자신있게 테스트할 수 있습니다.

다음 단계

• 후크를 확장하여 특정 쿼리 키와 같은 다른 매개변수를 허용하고 동작을 추가로 맞춤설정해 보세요.
• 애플리케이션의 성능과 사용자 경험을 향상시키기 위해 React Query의 유틸리티를 더 살펴보세요.

즐거운 코딩하세요!

위 내용은 전역 로딩 표시기에 대한 React 쿼리 후크를 만들고 테스트하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!