[英]How to test react functional component async call
I have a functional component.我有一个功能组件。 Inside the component, I have called SpecialistsListService service.在组件内部,我调用了 SpecialistsListService 服务。 The service called the API via Axios.该服务通过 Axios 调用 API。 I have to test the async function getSpecialistsList and useEffect functions but I don't do that anyone helps me to solve the problem.我必须测试异步 function getSpecialistsList 和 useEffect函数,但我不这样做任何人都可以帮助我解决问题。 When I used class component I simply call the method like await wrapper.instance.getSpecialistsList() then check the state but the functional component approach are different I think.当我使用 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} />
);
}
Splitting your component into custom hooks and component make your life easier to test and more readable by splitting UI and logic.通过拆分 UI 和逻辑,将您的组件拆分为自定义钩子和组件使您的生活更易于测试和更具可读性。
The custom hooks will look like this自定义钩子看起来像这样
useSpecialistsList.js使用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;
The component look like this组件看起来像这样
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} />
);
}
Now you can test your hooks using "@testing-library/react-hooks"现在你可以使用“@testing-library/react-hooks”来测试你的钩子了
Test will look like this测试将如下所示
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);
});
})
Here waitForNextUpdate call the useEffect (Generally update the component)这里waitForNextUpdate调用useEffect(一般更新组件)
To read more about testing custom hooks use this like要阅读有关测试自定义挂钩的更多信息,请使用以下内容
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.