Cuando pruebo una acción de async, uso async/in augar en el código de prueba.
Necesito prepararme para los datos de prueba. En este caso, uso un servidor JSON.
・ Mock/db.json
{ "users": [ { "id": 1, "name": "Foo" } ] }
・ paquete.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" },
y luego tengo que ejecutar un comando.
npm run json-server
・ src/ejemplo.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 ? (); }; export default GetUserData;Profile
> ) : (
- ID: {userData.id}
- Name: {userData.name}
...loading
)}
・ 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"); }); });
porque la prueba continúa sin datos del usuario.
・ 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"); }); });
Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.
Copyright© 2022 湘ICP备2022001581号-3