TypeScript тест бичих (Jest + ts-jest)
Тест бичих нь код зөв ажиллаж байгааг автоматаар шалгах арга юм. Нэг удаа тест бичвэл хожим код өөрчлөхөд юу эвдэрснийг секундын дотор мэдэж болдог. Энэ нь баг хамтран ажиллахад онцгой чухал.
Jest бол JavaScript экосистемийн хамгийн алдартай тестийн framework. ts-jest нь TypeScript файлыг Jest-т ойлгуулдаг хөрвүүлэгч.
Суулгах ба тохиргоо
# Jest болон TypeScript дэмжлэг суулгах
npm install --save-dev jest ts-jest @types/jest
# package.json-д тест скрипт нэмэх
# "scripts": { "test": "jest", "test:watch": "jest --watch" }
jest.config.ts файл үүсгэнэ:
// jest.config.ts
import type { Config } from "jest";
const тохиргоо: Config = {
preset: "ts-jest",
testEnvironment: "node",
// Тестийн файлыг хаанаас хайхыг заана
testMatch: ["**/__tests__/**/*.test.ts", "**/*.test.ts"],
// TypeScript alias тохиргоо (Next.js-д хэрэгтэй)
moduleNameMapper: {
"^@/(.*)$": "<rootDir>/$1",
},
};
export default тохиргоо;
Анхны тест бичих
Тест бичихийн тулд эхлээд тест хийх функцийг тодорхойлно:
// lib/utils.ts — тест хийх функцууд
export function нэмэх(а: number, б: number): number {
return а + б;
}
export function и_мэйлШалгах(и_мэйл: string): boolean {
return и_мэйл.includes("@") && и_мэйл.includes(".");
}
export function xpТүвшинТооцох(xp: number): number {
if (xp < 100) return 1;
if (xp < 300) return 2;
if (xp < 600) return 3;
return 4;
}
Дараа нь __tests__ хавтас дотор тест файл үүсгэнэ:
// __tests__/utils.test.ts
import { нэмэх, и_мэйлШалгах, xpТүвшинТооцох } from "@/lib/utils";
// describe — холбоотой тестүүдийг бүлэглэнэ
describe("нэмэх функц", () => {
// it / test — нэг тест тус бүр
it("хоёр эерэг тоог зөв нэмнэ", () => {
expect(нэмэх(2, 3)).toBe(5);
});
it("сөрөг тоотой зөв ажиллана", () => {
expect(нэмэх(-1, 4)).toBe(3);
});
it("тэг нэмэхэд өөрчлөгдөхгүй", () => {
expect(нэмэх(7, 0)).toBe(7);
});
});
describe("и_мэйлШалгах функц", () => {
it("зөв и-мэйлийг зөвшөөрнө", () => {
expect(и_мэйлШалгах("хэрэглэгч@жишээ.мн")).toBe(true);
});
it("@ тэмдэггүй и-мэйлийг татгалзана", () => {
expect(и_мэйлШалгах("хэрэглэгчжишээмн")).toBe(false);
});
it("цэггүй и-мэйлийг татгалзана", () => {
expect(и_мэйлШалгах("хэрэглэгч@жишээ")).toBe(false);
});
});
describe("xpТүвшинТооцох функц", () => {
it("0 XP — 1-р түвшин", () => {
expect(xpТүвшинТооцох(0)).toBe(1);
});
it("100 XP — 2-р түвшин", () => {
expect(xpТүвшинТооцох(100)).toBe(2);
});
it("599 XP — 3-р түвшин", () => {
expect(xpТүвшинТооцох(599)).toBe(3);
});
it("600+ XP — 4-р түвшин", () => {
expect(xpТүвшинТооцох(600)).toBe(4);
});
});
Тест ажиллуулах:
npm test
# эсвэл
npm run test:watch # файл хадгалах бүрт автоматаар ажиллана
Async функц тест хийх
API дуудлага, датабаасын үйлдэл зэрэг async функцийг тест хийхэд async/await хэрэглэнэ:
// lib/api.ts
export async function нийтлэлАвах(id: number): Promise<{ id: number; title: string }> {
const хариу = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
if (!хариу.ok) {
throw new Error(`Алдаа: ${хариу.status}`);
}
return хариу.json();
}
// __tests__/api.test.ts
// fetch-ийг mock болгох — бодит сүлжээнд хандахгүй
global.fetch = jest.fn();
describe("нийтлэлАвах функц", () => {
afterEach(() => {
// Тест болгоны дараа mock-ийг цэвэрлэнэ
jest.clearAllMocks();
});
it("амжилттай тохиолдолд нийтлэл буцаана", async () => {
const жишээНийтлэл = { id: 1, title: "Тест нийтлэл" };
// fetch амжилттай буцаана гэж тохируулна
(global.fetch as jest.Mock).mockResolvedValueOnce({
ok: true,
json: async () => жишээНийтлэл,
});
const үр_дүн = await нийтлэлАвах(1);
expect(үр_дүн).toEqual(жишээНийтлэл);
expect(үр_дүн.title).toBe("Тест нийтлэл");
});
it("серверийн алдаа гарвал exception шидэнэ", async () => {
(global.fetch as jest.Mock).mockResolvedValueOnce({
ok: false,
status: 404,
});
// async функц exception шидэхийг шалгах
await expect(нийтлэлАвах(999)).rejects.toThrow("Алдаа: 404");
});
});
// Дутуу import засах
import { нийтлэлАвах } from "@/lib/api";
Хамгийн түгээмэл matcher-ууд
| Matcher | Утга |
|---|---|
| toBe(утга) | Яг тэнцүү (===) |
| toEqual(утга) | Гүн тэнцүү (объект, массив) |
| toBeTruthy() | Үнэн утгатай |
| toBeFalsy() | Худал утгатай |
| toContain(утга) | Массив/мөр агуулна |
| toThrow() | Exception шидэнэ |
| toHaveBeenCalled() | Mock функц дуудагдсан |
| toBeNull() | null байна |
| toBeGreaterThan(n) | Тоо n-ээс их |
Дараагийн хичээлд:
TypeScript болон Next.js дотор гүйцэтгэлийг сайжруулах — bundle хэмжээ багасгах, memo, lazy loading зэрэг аргуудыг сурна.