如何測試反應功能組件異步調用

Question

我有一個功能組件。 在組件內部，我調用了 SpecialistsListService 服務。 該服務通過 Axios 調用 API。 我必須測試異步 function getSpecialistsList 和 useEffect函數，但我不這樣做任何人都可以幫助我解決問題。 當我使用 class 組件時，我只需調用await wrapper.instance.getSpecialistsList()之類的方法，然后檢查 state 但我認為功能組件方法不同。

import React, { useState, useEffect } from "react";
import SpecialistsListService from "../../../services/specialists";
import SpecialistsPageView from "./SpecialistsPageView";
import "./index.scss";

export default function SpecialistsPage() {
  const [specialistsList, setSpecialistsList] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  const specialistsListService = new SpecialistsListService();

  useEffect(() => {
    getSpecialistsList();
  }, []);

  async function getSpecialistsList() {
    const specialistsListData = await specialistsListService.getSpecialistsList();
    setSpecialistsList(specialistsListData);
    setIsLoading(false);
  }

  return (
    <SpecialistsPageView isLoading={isLoading} specialists={specialistsList} />
  );
}

Answer 1

通過拆分 UI 和邏輯，將您的組件拆分為自定義鈎子和組件使您的生活更易於測試和更具可讀性。

自定義鈎子看起來像這樣

使用SpecialistsList.js

import { useState, useEffect } from "react";

const useSpecialistsList = (specialistsListService) => {
  const [specialistsList, setSpecialistsList] = useState([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    getSpecialistsList();
  }, []);

  async function getSpecialistsList() {
    const specialistsListData = await specialistsListService.getSpecialistsList();
    setSpecialistsList(specialistsListData);
    setIsLoading(false);
  }

  return {
    isLoading: isLoading,
    specialistsList: specialistsList
  }
}

export default useSpecialistsList;

組件看起來像這樣

import React from "react";
import SpecialistsListService from "../../../services/specialists";
import SpecialistsPageView from "./SpecialistsPageView";
import useSpecialistsList from "./useSpecialistsList";
import "./index.scss";

export default function SpecialistsPage() {
  const {isLoading, specialistsList} = useSpecialistsList(new SpecialistsListService());

  return (
    <SpecialistsPageView isLoading={isLoading} specialists={specialistsList} />
  );
}

現在你可以使用“@testing-library/react-hooks”來測試你的鈎子了

測試將如下所示

import {renderHook} from "@testing-library/react-hooks";
import useSpecialistsList from "./useSpecialistsList";
import SpecialistsListService from "../../../services/specialists";

describe("useSpecialistsList", ()=>{
  
    it('Should return userDetails loading as false', async ()=> {
        const {result, waitForNextUpdate} = renderHook(()=> useSpecialistsList(new SpecialistsListService()));
        
        expect(result.current.isLoading).toEqual(true);

        await waitForNextUpdate();

        expect(result.current.isLoading).toEqual(false);
    });
})

這里waitForNextUpdate調用useEffect（一般更新組件）

要閱讀有關測試自定義掛鈎的更多信息，請使用以下內容