React / Тест бичих үндэс (Vitest)

Тест бичих үндэс (Vitest)

"Тест бичих" гэдэг нь кодоо гараар ажиллуулж шалгахын оронд автоматаар шалгадаг нэмэлт код бичих явдал. Эхэндээ нэмэлт ажил мэт санагдах ч нэг удаа тест бичсэн код нь дараа нь засварлахад, шинэ функц нэмэхэд санаа зоволгүй байх боломжийг олгодог. Vitest бол Vite-д зориулагдсан хурдан, хялбар тест хэрэгсэл юм.

Яагаад тест бичих хэрэгтэй вэ?

Төсөл томрох тусам гараар шалгах нь хэцүүдэж, алдаа гаргах магадлал нэмэгддэг:

код

Тест бичихгүй бол:              Тест бичвэл:
────────────────────             ────────────────
Нэг засвал нөгөө эвдэрч         Автоматаар бүгдийг шалгана
Гараар шалгах шаардлагатай      Нэг тушаалаар бүгдийг шалгана
Айгаад засвар хийхгүй байна     Итгэлтэйгээр засвар хийнэ
Алдааг хэрэглэгч мэдэгддэг     Алдааг хөгжүүлэгч эрт мэдэгддэг

Тест бол кодын "хамгаалалтын тор" юм — унаж болох ч гэмтэлгүй буудаг.

Vitest суулгах

Vite + React-тай апп-д Vitest нэмэхэд маш хялбар:

bash

npm install --save-dev vitest @testing-library/react @testing-library/jest-dom jsdom

package.json-д test команд нэмнэ:

json

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vitest",
    "test:ui": "vitest --ui"
  }
}

vite.config.ts-д test тохиргоо нэмнэ:

typescript

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

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

src/test/setup.ts файл үүсгэнэ:

typescript

import "@testing-library/jest-dom";

Анхны тест бичих

Тест файлын нэр .test.ts эсвэл .test.tsx өргөтгөлтэй байна. Тест гурван хэсгээс бүрдэнэ: Arrange (бэлтгэх), Act (үйлдэл хийх), Assert (шалгах).

typescript

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

// Туршиж буй функц
function add(a: number, b: number): number {
  return a + b;
}

function formatXP(xp: number): string {
  return `${xp} XP`;
}

describe("Тооцооллын функцүүд", () => {
  it("хоёр тоог нэмж чадна", () => {
    // Arrange — бэлтгэх
    const a = 5;
    const b = 3;

    // Act — үйлдэл хийх
    const result = add(a, b);

    // Assert — шалгах
    expect(result).toBe(8);
  });

  it("XP форматыг зөв гаргана", () => {
    expect(formatXP(150)).toBe("150 XP");
    expect(formatXP(0)).toBe("0 XP");
  });

  it("тооцоолол буруу байвал тест амжилтгүй болно", () => {
    expect(add(2, 2)).not.toBe(5);
  });
});

React component тест бичих

React Testing Library ашиглан component-ыг браузерт ажиллах шиг туршиж болно:

tsx

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

describe("Button component", () => {
  it("label-ыг зөв харуулна", () => {
    render(<Button label="Эхлэх" onClick={() => {}} />);

    // Дэлгэцэнд "Эхлэх" гэсэн текст байна уу?
    expect(screen.getByText("Эхлэх")).toBeInTheDocument();
  });

  it("дарахад onClick дуудагдана", () => {
    // vi.fn() — дуудагдсан эсэхийг шалгадаг "жинхэнэ биш" функц
    const mockClick = vi.fn();

    render(<Button label="Дарах" onClick={mockClick} />);
    fireEvent.click(screen.getByText("Дарах"));

    // Яг нэг удаа дуудагдсан уу?
    expect(mockClick).toHaveBeenCalledTimes(1);
  });

  it("disabled үед дарж болохгүй", () => {
    const mockClick = vi.fn();

    render(<Button label="Хаасан" onClick={mockClick} disabled />);
    fireEvent.click(screen.getByText("Хаасан"));

    expect(mockClick).not.toHaveBeenCalled();
  });
});

Тест ажиллуулах

bash

# Нэг удаа ажиллуулах
npm test

# Watch горим — файл өөрчлөгдөх бүрт дахин ажиллана
npm test -- --watch

# Тодорхой файлыг л шалгах
npm test Button

Тест амжилттай болбол:

код

✓ Button component > label-ыг зөв харуулна
✓ Button component > дарахад onClick дуудагдана
✓ Button component > disabled үед дарж болохгүй

Test Files  1 passed (1)
Tests       3 passed (3)

Нэг тест амжилтгүй болбол яг аль мөрөнд, яагаад болоогүйг тодорхой харуулна — expected 4 to be 5 гэх мэт.

Тест бичих нь дадал шаарддаг ур чадвар. Эхэндээ хамгийн чухал функцуудаас л эхлэх хэрэгтэй — бүх зүйлд тест бичих шаардлагагүй. Цаг хугацааны явцад зөн совин нь хурцдаж, хаана тест хэрэгтэй, хаана хэрэггүйг мэдрэх болно.

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

React Testing Library ашиглан илүү нарийн component тест бичих — хэрэглэгчийн үйлдлийг дуурайх, async үйлдлийг тест хийх аргуудыг судална.

← Өмнөх хичээлEvents төрөлжүүлэх Дараах хичээл →Component тест (React Testing Library)