Next.js / Next.js тест бичих

Next.js тест бичих

Тест бичих нь кодын найдвартай байдлыг баталгаажуулдаг. Шинэ feature нэмэх эсвэл код өөрчлөх үед тест байгаа бол юу эвдэрснийг шууд мэдэж болдог. Эхэндээ тест бичих нь нэмэлт ажил мэт санагдах боловч урт хугацаанд debug хийх цагийг маш их хэмнэдэг. Next.js проектод хамгийн өргөн хэрэглэгддэг хэрэгслүүд бол Vitest болон React Testing Library юм.

Тест орчин тохируулах

Vitest нь Vite дээр суурилсан хурдан test runner — Next.js-тэй маш сайн ажилладаг:

bash
npm install -D vitest @vitejs/plugin-react @testing-library/react @testing-library/jest-dom jsdom

vitest.config.ts файл үүсгэнэ:

typescript
// vitest.config.ts
import { defineConfig } from "vitest/config";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  test: {
    environment: "jsdom",
    setupFiles: ["./vitest.setup.ts"],
    globals: true,
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "."),
    },
  },
});

Setup файл үүсгэнэ:

typescript
// vitest.setup.ts
import "@testing-library/jest-dom";

package.json-д script нэмнэ:

json
{
  "scripts": {
    "test": "vitest",
    "test:ui": "vitest --ui",
    "test:run": "vitest run"
  }
}

Utility function тест бичих

Хамгийн энгийн тест бол pure function-г шалгах явдал юм. Жишээ нь XP тооцох функцийг тестлэнэ:

typescript
// lib/__tests__/utils.test.ts
import { describe, it, expect } from "vitest";

function formatXP(xp: number): string {
  if (xp >= 1000) return `${(xp / 1000).toFixed(1)}k XP`;
  return `${xp} XP`;
}

function getLevelFromXP(xp: number): number {
  return Math.floor(xp / 100) + 1;
}

describe("formatXP", () => {
  it("мянгаас бага XP-г тоогоор харуулна", () => {
    expect(formatXP(250)).toBe("250 XP");
  });

  it("мянгаас дээш XP-г k-ээр харуулна", () => {
    expect(formatXP(1500)).toBe("1.5k XP");
  });

  it("тэг XP зөв харагдана", () => {
    expect(formatXP(0)).toBe("0 XP");
  });
});

describe("getLevelFromXP", () => {
  it("0 XP бол 1-р level", () => {
    expect(getLevelFromXP(0)).toBe(1);
  });

  it("100 XP бол 2-р level", () => {
    expect(getLevelFromXP(100)).toBe(2);
  });
});

React Component тест бичих

React Testing Library ашиглан component render болж байгааг шалгана:

tsx
// components/ui/__tests__/Badge.test.tsx
import { render, screen } from "@testing-library/react";
import { describe, it, expect } from "vitest";
import Badge from "../Badge";

describe("Badge component", () => {
  it("текст зөв харагдана", () => {
    render(<Badge>Үнэгүй</Badge>);
    expect(screen.getByText("Үнэгүй")).toBeInTheDocument();
  });

  it("className prop хүлээн авна", () => {
    render(<Badge className="custom-class">Pro</Badge>);
    const badge = screen.getByText("Pro");
    expect(badge).toHaveClass("custom-class");
  });
});

Button component-г click event-тэй тестлэнэ:

tsx
// components/ui/__tests__/Button.test.tsx
import { render, screen, fireEvent } from "@testing-library/react";
import { describe, it, expect, vi } from "vitest";
import Button from "../Button";

describe("Button component", () => {
  it("товчлуур дарагдахад onClick дуудагдана", () => {
    const handleClick = vi.fn();
    render(<Button onClick={handleClick}>Дуусгах</Button>);

    fireEvent.click(screen.getByText("Дуусгах"));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });

  it("disabled үед дарагдахгүй", () => {
    const handleClick = vi.fn();
    render(
      <Button onClick={handleClick} disabled>
        Дуусгах
      </Button>,
    );

    fireEvent.click(screen.getByText("Дуусгах"));
    expect(handleClick).not.toHaveBeenCalled();
  });
});

API Route тест бичих

API route-г тестлэхдээ NextRequest mock хийнэ:

typescript
// app/api/health/__tests__/route.test.ts
import { describe, it, expect } from "vitest";
import { GET } from "../route";
import { NextRequest } from "next/server";

describe("GET /api/health", () => {
  it("status ok буцаана", async () => {
    const request = new NextRequest("http://localhost:3000/api/health");
    const response = await GET(request);
    const data = await response.json();

    expect(response.status).toBe(200);
    expect(data.status).toBe("ok");
    expect(typeof data.timestamp).toBe("number");
  });
});

| Тестийн төрөл | Хэрэглэгдэх газар | | ---------------- | ----------------------------- | | Unit test | Pure function, utility logic | | Component test | React component render, event | | Integration test | API route, database call | | E2E test | Хэрэглэгчийн бүрэн flow |

Тестийг __tests__ директор дотор эсвэл файлын нэрэнд .test.ts залгаж хадгална. npm run test ажиллуулахад Vitest автоматаар бүх тестийг олж ажиллуулна.

Дараагийн хичээлд:

Core Web Vitals гэж юу болохыг ойлгож, Next.js аппыг хэрхэн хурдасгах, оновчлох аргуудыг сурна.

← Өмнөх хичээлi18n үндэсДараах хичээл →Core Web Vitals ба оновчлол