Тестирование фронтенда: Vitest и Testing Library

npm create vite@latest app -- --template react-ts
cd app
npm install
npm install -D vitest jsdom @testing-library/react @testing-library/dom @testing-library/user-event @testing-library/jest-dom msw@3

import react from "@vitejs/plugin-react";
import { defineConfig } from "vitest/config";

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    setupFiles: ["./src/test/setup.ts"],
    unstubGlobals: true,
  },
});

import "@testing-library/jest-dom/vitest";
import { cleanup } from "@testing-library/react";
import { afterEach } from "vitest";

afterEach(() => {
  cleanup();
});

export type CartItem = { id: string; price: number; qty: number };

export function cartTotal(items: CartItem[], discountPercent = 0): number {
  if (discountPercent < 0 || discountPercent > 100) {
    throw new RangeError("discountPercent must be between 0 and 100");
  }
  const subtotal = items.reduce((sum, item) => sum + item.price * item.qty, 0);
  return Math.round(subtotal * (1 - discountPercent / 100));
}

import { describe, expect, it } from "vitest";
import { cartTotal } from "./cart";

describe("cartTotal", () => {
  it("returns 0 for an empty cart", () => {
    expect(cartTotal([])).toBe(0);
  });

  it("multiplies price by quantity", () => {
    const items = [
      { id: "latte", price: 1800, qty: 2 },
      { id: "croissant", price: 900, qty: 1 },
    ];
    expect(cartTotal(items)).toBe(4500);
  });

  it("applies a percentage discount and rounds to whole tenge", () => {
    expect(cartTotal([{ id: "latte", price: 1800, qty: 2 }], 10)).toBe(3240);
    expect(cartTotal([{ id: "tea", price: 999, qty: 1 }], 15)).toBe(849);
  });

  it("rejects a discount outside 0–100", () => {
    expect(() => cartTotal([], 120)).toThrow(RangeError);
  });
});

$ npx vitest run src/cart.test.ts --reporter=verbose


 RUN  v5.0.3 …/app

 ✓ src/cart.test.ts > cartTotal > returns 0 for an empty cart 1ms
 ✓ src/cart.test.ts > cartTotal > multiplies price by quantity 0ms
 ✓ src/cart.test.ts > cartTotal > applies a percentage discount and rounds to whole tenge 0ms
 ✓ src/cart.test.ts > cartTotal > rejects a discount outside 0–100 0ms

 Test Files  1 passed (1)
      Tests  4 passed (4)

--- a/src/cart.ts
+++ b/src/cart.ts
@@ -7,3 +7,3 @@
   }
-  const subtotal = items.reduce((sum, item) => sum + item.price * item.qty, 0);
+  const subtotal = items.reduce((sum, item) => sum + item.price, 0);
   return Math.round(subtotal * (1 - discountPercent / 100));

$ npx vitest run src/cart.test.ts; echo "exit=$?"


 RUN  v5.0.3 …/app

 ❯ src/cart.test.ts (4 tests | 2 failed) 9ms
   ❯ cartTotal (4)
     × multiplies price by quantity 5ms
     × applies a percentage discount and rounds to whole tenge 1ms

⎯⎯⎯⎯⎯⎯⎯ Failed Tests 2 ⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/cart.test.ts > cartTotal > multiplies price by quantity
AssertionError: expected 2700 to be 4500 // Object.is equality

- Expected
+ Received

- 4500
+ 2700

 ❯ src/cart.test.ts:14:30
     12|       { id: "croissant", price: 900, qty: 1 },
     13|     ];
     14|     expect(cartTotal(items)).toBe(4500);
       |                              ^
     15|   });
     16|


…

⎯⎯⎯⎯⎯⎯⎯ Failed Tests 2 ⎯⎯⎯⎯⎯⎯⎯
 Test Files  1 failed (1)
      Tests  2 failed | 2 passed (4)
exit=1

export type Lead = { name: string; phone: string };

export async function sendLead(lead: Lead): Promise<{ id: string }> {
  const res = await fetch("/api/leads", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(lead),
  });
  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.json();
}

import { useState, type FormEvent } from "react";
import { sendLead } from "./api";

type Status = "idle" | "sending" | "sent" | "error";

const PHONE_RE = /^\+?\d{10,15}$/;

export function LeadForm() {
  const [name, setName] = useState("");
  const [phone, setPhone] = useState("");
  const [phoneError, setPhoneError] = useState("");
  const [status, setStatus] = useState<Status>("idle");

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!PHONE_RE.test(phone.replace(/[\s()-]/g, ""))) {
      setPhoneError("Enter a phone number, e.g. +7 701 123 45 67");
      return;
    }
    setPhoneError("");
    setStatus("sending");
    try {
      await sendLead({ name, phone });
      setStatus("sent");
    } catch {
      setStatus("error");
    }
  }

  if (status === "sent") {
    return <p role="status">Thanks! We will call you back.</p>;
  }

  return (
    <form onSubmit={handleSubmit} noValidate>
      <label htmlFor="lead-name">Name</label>
      <input id="lead-name" value={name} onChange={(e) => setName(e.target.value)} />

      <label htmlFor="lead-phone">Phone</label>
      <input
        id="lead-phone"
        type="tel"
        value={phone}
        onChange={(e) => setPhone(e.target.value)}
        aria-invalid={phoneError ? true : undefined}
        aria-describedby={phoneError ? "lead-phone-error" : undefined}
      />
      {phoneError && (
        <p id="lead-phone-error" role="alert">
          {phoneError}
        </p>
      )}

      {status === "error" && <p role="alert">Could not send. Please try again.</p>}

      <button type="submit" disabled={status === "sending"}>
        {status === "sending" ? "Sending…" : "Send request"}
      </button>
    </form>
  );
}

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { describe, expect, it, vi } from "vitest";
import { LeadForm } from "./LeadForm";

function setup() {
  const user = userEvent.setup();
  render(<LeadForm />);
  return {
    user,
    name: screen.getByRole("textbox", { name: "Name" }),
    phone: screen.getByRole("textbox", { name: "Phone" }),
    submit: screen.getByRole("button", { name: "Send request" }),
  };
}

describe("LeadForm", () => {
  it("does not send an invalid phone and explains why", async () => {
    const fetchMock = vi.fn();
    vi.stubGlobal("fetch", fetchMock);
    const { user, phone, submit } = setup();

    await user.type(phone, "123");
    await user.click(submit);

    expect(screen.getByRole("alert")).toHaveTextContent("Enter a phone number");
    expect(phone).toHaveAttribute("aria-invalid", "true");
    expect(phone).toHaveAccessibleDescription(/Enter a phone number/);
    expect(fetchMock).not.toHaveBeenCalled();
  });

  it("sends the lead and shows a confirmation", async () => {
    const fetchMock = vi.fn().mockResolvedValue(Response.json({ id: "lead-1" }, { status: 201 }));
    vi.stubGlobal("fetch", fetchMock);
    const { user, name, phone, submit } = setup();

    await user.type(name, "Aigerim");
    await user.type(phone, "+7 701 123 45 67");
    await user.click(submit);

    expect(await screen.findByRole("status")).toHaveTextContent("Thanks!");
    expect(fetchMock).toHaveBeenCalledTimes(1);
    const [url, init] = fetchMock.mock.calls[0];
    expect(url).toBe("/api/leads");
    expect(JSON.parse(init.body)).toEqual({ name: "Aigerim", phone: "+7 701 123 45 67" });
  });

  it("shows an error and lets the user retry when the server fails", async () => {
    vi.stubGlobal("fetch", vi.fn().mockResolvedValue(new Response(null, { status: 500 })));
    const { user, phone, submit } = setup();

    await user.type(phone, "+77011234567");
    await user.click(submit);

    expect(await screen.findByRole("alert")).toHaveTextContent("Could not send");
    expect(screen.getByRole("button", { name: "Send request" })).toBeEnabled();
  });
});

import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { http, HttpResponse } from "msw/http";
import { setupServer } from "msw/node";
import { afterAll, afterEach, beforeAll, expect, it } from "vitest";
import { LeadForm } from "./LeadForm";

const received: unknown[] = [];

const server = setupServer(
  http.post("/api/leads", async ({ request }) => {
    received.push(await request.json());
    return HttpResponse.json({ id: "lead-1" }, { status: 201 });
  }),
);

beforeAll(() => server.listen({ onUnhandledFrame: "error" }));
afterEach(() => {
  server.resetHandlers();
  received.length = 0;
});
afterAll(() => server.close());

it("sends the lead over the network", async () => {
  const user = userEvent.setup();
  render(<LeadForm />);

  await user.type(screen.getByRole("textbox", { name: "Phone" }), "+77011234567");
  await user.click(screen.getByRole("button", { name: "Send request" }));

  expect(await screen.findByRole("status")).toHaveTextContent("Thanks!");
  expect(received).toEqual([{ name: "", phone: "+77011234567" }]);
});

it("shows an error when the API is down", async () => {
  server.use(http.post("/api/leads", () => new HttpResponse(null, { status: 503 })));
  const user = userEvent.setup();
  render(<LeadForm />);

  await user.type(screen.getByRole("textbox", { name: "Phone" }), "+77011234567");
  await user.click(screen.getByRole("button", { name: "Send request" }));

  expect(await screen.findByRole("alert")).toHaveTextContent("Could not send");
});

$ npx vitest run src/LeadForm.test.tsx src/LeadForm.msw.test.tsx --reporter=verbose


 RUN  v5.0.3 …/app

 ✓ src/LeadForm.test.tsx > LeadForm > does not send an invalid phone and explains why 252ms
 ✓ src/LeadForm.msw.test.tsx > sends the lead over the network 411ms
 ✓ src/LeadForm.msw.test.tsx > shows an error when the API is down 292ms
 ✓ src/LeadForm.test.tsx > LeadForm > sends the lead and shows a confirmation 500ms
 ✓ src/LeadForm.test.tsx > LeadForm > shows an error and lets the user retry when the server fails 344ms

 Test Files  2 passed (2)
      Tests  5 passed (5)