reactjs - 如何测试从 React 组件中的另一个函数获取数据的异步函数？

Question

我是 React 测试的新手。我想测试一个从 React 组件中的 API 获取 rick 和 Morty 数据的异步函数。

CharacterInfo.js

import React,{ useEffect, useState } from 'react';
import { episodeFetch } from '../../Service/API';
import EpisodesName from '../EpisodesName/EpisodesName';
const CharacterInfo = ({ image, name, status, species, gender, location, episodes }) => {
const [episodeName, setEpisodeName] = useState([]);
const [error, setError] = useState(null);
const [isLoaded, setIsLoaded] = useState(false);

async function getEpisodes() {
  try{
  setError(false);
  setIsLoaded(true);
  const data = await episodeFetch(episodes);

  if (data !== null && !Array.isArray(data)) {
    setEpisodeName([data]);
  }else{
    setEpisodeName(data);
   } 
 }catch(error){
  setError(true);
}    

  setIsLoaded(false);
};

useEffect(()=>{
  getEpisodes();

},[])

return (
  <div className="wrapper">
    <img id="character"src={image} alt="character-img"/>
    <div className="characterInfo">
      <h1 id="characterName">{name}</h1>
      <p>Status:<b id="characterStatus">{status}</b></p>
      <p>Species:<b id="characterSpecies">{species}</b></p>
      <p>Gender:<b id="characterGender">{gender}</b></p>
      <p>Location:<b  id="characterLocation">{location}</b></p>
      <EpisodesName episodeName={episodeName} />
    </div>
  </div>
)}
export default CharacterInfo;

CharacterInfo.test.js

import CharacterInfo from  "./CharacterInfo";
import {shallow } from "enzyme";

describe("CharacterInfo", () => {
const data={
   image:"ricky.jpg",
   name:"tricky",
   status:"alive", 
   species:"human", 
   gender:"male",
   location:"earth",
   episodes:{
     id:"1",
     name:"blow",
     airdate:"12.04.2021",
     episode:"S1E3"
    }
    }

   it("renders without crashing", () => {
   const {image, name, status, species, gender, location, episodes}=data;
   const wrapper=shallow(<CharacterInfo 
      image={image}
      name={name}
      status={status}
      gender={gender}
      species={species}
      location={location}
      episodes={episodes}
      />);

     const imgSrc= wrapper.find("img").prop('src');
     const characterNameText = wrapper.find("#characterName").text();
     const characterStatusText = wrapper.find("#characterStatus").text();
     const characterSpeciesText = wrapper.find("#characterSpecies").text();
     const characterGenderText = wrapper.find("#characterGender").text();
     const characterLocationText = wrapper.find("#characterLocation").text();
     const characrerEpisodes= wrapper.find("EpisodesName")

     expect(imgSrc).toBe("ricky.jpg");
     expect(characterNameText).toBe("ricky");
     expect(characterStatusText).toBe("alive");
     expect(characterSpeciesText).toBe("human");
     expect(characterGenderText).toBe("male");
     expect(characterLocationText).toBe("earth");
     expect(characrerEpisodes.length).toBe(1);
     });
    })

episodeFetch 函数：

export const episodeFetch = async (episodes) =>{
const data = await axios.get(`${EPISODES_BASE_URL}/${episodes}`)
.then((response) => {
   return response.data;
})
.catch(err=> err)
return data;
}

我想测试CharaterInfo 组件中的 getEpisodes()函数。我该怎么做，我搜索了很多但找不到任何东西。

标签： reactjsenzymereact-testing-libraryreact-test-rendererreact-testing