import "@testing-library/jest-dom/vitest"; import { render, screen } from "@testing-library/react"; import { afterAll, afterEach, beforeAll, describe, expect, it } from "vitest"; import { http, HttpResponse } from "msw"; import { setupServer } from "msw/node"; import { useEffect, useState } from "react"; type Course = { id: string; title: string }; const server = setupServer( http.get("/api/courses", () => { return HttpResponse.json({ courses: [{ id: "flexbox", title: "Belajar Flexbox" }], }); }), ); beforeAll(() => server.listen()); afterEach(() => server.resetHandlers()); afterAll(() => server.close()); function CourseCatalog() { const [courses, setCourses] = useState([]); const [status, setStatus] = useState<"loading" | "success" | "error">("loading"); useEffect(() => { async function loadCourses() { try { const response = await fetch("/api/courses"); if (!response.ok) { throw new Error("Course request failed"); } const data = (await response.json()) as { courses: Course[] }; setCourses(data.courses); setStatus("success"); } catch { setStatus("error"); } } void loadCourses(); }, []); if (status === "loading") { return

Memuat course...

; } if (status === "error") { return

Gagal memuat course

; } return (

{courses.map((course) => (

{course.title}

))}

); } describe("CourseCatalog API states", () => { it("shows loading then the course after a successful response", async () => { render(); expect(screen.getByText("Memuat course...")).toBeInTheDocument(); expect( await screen.findByRole("heading", { name: "Belajar Flexbox" }), ).toBeInTheDocument(); }); it("shows an error message after a failed response", async () => { server.use( http.get("/api/courses", () => { return new HttpResponse(null, { status: 500 }); }), ); render(); expect(await screen.findByRole("alert")).toHaveTextContent( "Gagal memuat course", ); }); });

Test course catalog API states