• 当我测试异步操作时，我在测试代码中使用 async/await。

• 我需要准备测试数据。在本例中，我使用 json 服务器。

・mock/db.json

{
  "users": [
    {
      "id": 1,
      "name": "foo"
    }
  ]
}

・package.json

 "scripts": {
    "dev": "vite",
    "start": "vite",
    "build": "vite build",
    "test": "vitest",
    "preview": "vite preview",

    // ↓ setting a script for json server
    "json-server": "npx json-server -w ./mock/db.json -p 4030"
  },

然后我必须运行命令。

 npm run json-server

・src/example.js

import getuserdata from "./components/getuserdata";

//the path of test data
export const endpoint_url = 'http://localhost:4030/users/1';

const example = () => {
  return (
    <>
      
    
  );
};

export default example;

・src/components/getuserdata.jsx

import { useeffect, usestate } from "react";
import axios from "axios";

const getuserdata = ({ url }) => {
  const [userdata, setuserdata] = usestate(null);

  useeffect(() => {
    axios.get(url).then((response) => setuserdata(response.data));
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    

      {userdata ? (
        <>
          
profile
          

            
id: {userdata.id}
            
name: {userdata.name}
          
        
      ) : (
        
...loading
      )}
    
  );
};

export default getuserdata;

・src/components/getuserdata.test.jsx

医院网站系统

HTML医院网站系统基于PHP+MYSQL开发，在文章内容网站的基础上，预设了医院概况、新闻动态、环境设备、名医荟萃、专科介绍、就医指南、专家门诊值班表、网上挂号、医疗保健知识、在线咨询等医院网站常用的栏目和测试数据，采用适合医院网站的专用模版，增强了系统的针对性和易用性。系统具有文章、图文、下载、社区、表单、用户等基本系统模块和一系列网站辅助功能，用户也可根据自身特点任意创建和修改栏目，适合创建

下载

import { render, screen } from "@testing-library/react";
import getuserdata from "./getuserdata";
import { endpoint_url } from "../example";

describe("check an action of the getuserdata component", () => {

  test("external data fetching in progress", () => {
    render();
    const h1el = screen.getbyrole("heading", { name: "...loading" });
    expect(h1el).tobeinthedocument();
  });

  ★ not using  async/await
  test("after external data fetching",  () => {
    render();
    const h2el =  screen.findbyrole("heading", { name: "profile" });
    expect(h2el).tobeinthedocument();

    const itemels =  screen.findallbyrole("listitem");

    expect(itemels[0].textcontent).tobe("id: 1");
    expect(itemels[1].textcontent).tobe("name: foo");
  });
});

• 如果我不使用 async/await，测试会在 expect(h2el).tobeinthedocument(); 处失败。

因为测试在没有用户数据的情况下继续进行。

・src/components/getuserdata.test.jsx

import { render, screen } from "@testing-library/react";
import GetUserData from "./GetUserData";
import { ENDPOINT_URL } from "../Example";

describe("Check an action of The GetUserData component", () => {
  test("External data fetching in progress", () => {
    render();
    const h1El = screen.getByRole("heading", { name: "...loading" });
    expect(h1El).toBeInTheDocument();
  });

  ★ Using  async/await
  test("After external data fetching", async () => {
    render();
    const h2El = await screen.findByRole("heading", { name: "Profile" });
    expect(h2El).toBeInTheDocument();

    const itemEls = await screen.findAllByRole("listitem");

    expect(itemEls[0].textContent).toBe("ID: 1");
    expect(itemEls[1].textContent).toBe("Name: Foo");
  });
});

• 如果我使用async/await，测试就会成功。

• 显示