如何测试反应功能组件异步调用

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（一般更新组件）

要阅读有关测试自定义挂钩的更多信息，请使用以下内容