# Vitest คืออะไร? คู่มือ Unit Testing สำหรับ Next.js และ Vite ที่เร็วกว่า Jest สำหรับ SME 2026
การเขียน unit test เป็นเรื่องที่หลายทีม SME มักละเลย เพราะคิดว่าช้าและใช้เวลาตั้งค่านาน โดยเฉพาะเมื่อใช้ Jest ที่ต้องตั้ง Babel transformer, ts-jest, และ config ซับซ้อนกว่าจะรันได้ Vitest เกิดขึ้นมาเพื่อแก้ปัญหาเหล่านี้โดยตรง โดยใช้พลังของ Vite และ esbuild ทำให้รัน test ได้เร็วขึ้นมหาศาลและตั้งค่าง่ายกว่าเดิมมาก
ในบทความนี้เราจะมาทำความรู้จัก Vitest ดูว่าเหมาะกับใคร ต่างจาก Jest อย่างไร และวิธีเริ่มเขียน unit test ใน Next.js 15 และ Vue 3 / Nuxt แบบ step-by-step พร้อมตัวอย่างโค้ดจริงที่ก๊อปไปใช้ได้ทันที
Vitest คืออะไร
Vitest คือ next-generation testing framework ที่พัฒนาโดยทีมเดียวกับ Vite (Evan You และ community) เปิดตัวปี 2021 และในปี 2026 กลายเป็นมาตรฐานใหม่สำหรับ frontend testing ในโลก JavaScript/TypeScript ที่ใช้ ESM
จุดเด่นสำคัญคือ Vitest ใช้ Vite config ตัวเดียวกับที่ใช้ dev/build ทำให้ไม่ต้องตั้งค่า transformer ซ้ำ รองรับ TypeScript, JSX, TSX, CSS modules, path aliases ได้ทันทีโดยไม่ต้องตั้งอะไรเพิ่ม
ฟีเจอร์หลักของ Vitest
| ฟีเจอร์ | คำอธิบาย |
|---|---|
| Hot Module Replacement (HMR) | Re-run เฉพาะไฟล์ที่แก้ไข ความเร็วใกล้ instant |
| Native ESM & TypeScript | ไม่ต้องใช้ Babel / ts-jest |
| Jest-compatible API | `describe`, `it`, `expect`, mocks ใช้ syntax เดียวกัน |
| In-source testing | เขียน test ในไฟล์เดียวกับ source code ได้ |
| Workspace support | แยก config ต่อ sub-project ใน monorepo |
| Browser mode | รัน test ใน browser จริงด้วย Playwright |
| UI Dashboard | `vitest --ui` เปิด dashboard ดูผลแบบ real-time |
ทำไมถึงต้องย้ายจาก Jest มา Vitest
Jest ยังเป็นเครื่องมือที่ดีและ mature แต่หลายข้อจำกัดของ Jest ไม่เข้ากับ stack ที่ใช้ Vite/ESM อีกต่อไป
เทียบ Vitest vs Jest vs Mocha
| หัวข้อ | Vitest | Jest | Mocha |
|---|---|---|---|
| ความเร็ว | เร็วที่สุด (HMR) | ปานกลาง | เร็ว (แต่ต้องตั้งเอง) |
| TypeScript native | ใช่ | ต้องตั้ง ts-jest | ต้องตั้ง ts-node |
| ESM support | ใช่ (native) | Experimental | ต้องตั้ง |
| Mocking / Spies | ครบ | ครบ | ต้องใช้ sinon |
| Snapshot | ใช่ | ใช่ | ต้องใช้ plugin |
| เหมาะกับ | Vite, Next.js 15, Nuxt | React CRA เก่า | Node.js API, เก่า |
วิธีเริ่มใช้ Vitest ใน 5 ขั้นตอน
Step 1: ติดตั้ง
```bash
npm install -D vitest @vitest/ui @testing-library/react @testing-library/jest-dom jsdom
```
Step 2: เพิ่ม config ใน `vite.config.ts`
```typescript
/// <reference types="vitest" />
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
test: {
environment: 'jsdom',
globals: true,
setupFiles: ['./vitest.setup.ts'],
},
});
```
Step 3: สร้างไฟล์ setup
```typescript
// vitest.setup.ts
import '@testing-library/jest-dom/vitest';
```
Step 4: เขียน test แรก
```typescript
// src/components/Button.test.tsx
import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import Button from './Button';
describe('Button', () => {
it('renders label', () => {
render(<Button>Click Me</Button>);
expect(screen.getByRole('button', { name: /click me/i })).toBeInTheDocument();
});
});
```
Step 5: เพิ่ม script ใน package.json
```json
{
"scripts": {
"test": "vitest",
"test:ui": "vitest --ui",
"test:coverage": "vitest run --coverage"
}
}
```
รัน `npm test` แล้วคุณจะเห็น watch mode ที่ re-run เฉพาะไฟล์ที่เปลี่ยนแปลงในเวลาไม่ถึง 1 วินาที
Tips สำหรับ SME ที่เพิ่งเริ่มเขียน Test
ข้อควรระวัง
แม้ Vitest จะเป็นตัวเลือกที่ดีที่สุดสำหรับโปรเจกต์ใหม่ แต่ถ้าคุณมี Jest setup เดิมขนาดใหญ่ที่ใช้มานานและมี custom matcher หลายตัว การ migrate อาจใช้เวลาเล็กน้อยในการย้าย snapshot format และ mock syntax บางชนิดที่ต่างกัน ควรใช้ tool อย่าง `jest-codemods` ช่วยแปลง syntax อัตโนมัติ และทยอยย้ายทีละ module แทนการ rewrite ทั้งหมดในครั้งเดียว นอกจากนี้สำหรับ Node.js backend ล้วน ๆ (ไม่มี UI) Jest หรือ Node test runner ก็ยังเป็นทางเลือกที่ mature กว่า
สรุป
Vitest เป็น testing framework ที่ตอบโจทย์ยุค Vite + ESM + TypeScript ได้อย่างลงตัว ด้วยความเร็วที่เหนือกว่า Jest อย่างชัดเจน API ที่คุ้นเคย และ DX ที่ดีที่สุดในปัจจุบัน ทำให้ SME สามารถเพิ่มคุณภาพโค้ดได้โดยไม่ต้องเสียเวลาตั้งค่า
Key Takeaways:
หากทีมพัฒนาของคุณต้องการวางระบบ CI/CD ที่มี unit test, integration test และ E2E test ครบลูปพร้อม Laravel backend + Next.js frontend ทีม ADS FIT ให้คำปรึกษาและวาง testing strategy ให้คุณได้ทันที [ติดต่อเรา](/contact) เพื่อยกระดับคุณภาพโค้ดของทีมคุณ