当我测试异步操作时，我在测试代码中使用 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 dataexport const endpoint_url = 'http://localhost:4030/users/1';const example = () => { return ( ・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
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，测试就会成功。
显示
以上就是React 基础知识~单元测试/异步测试的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1494120.html
微信扫一扫 
支付宝扫一扫 
