Testing & Type Safety trong Next.js: Setup pipeline bài bản từ đầu

1{
2  "compilerOptions": {
3    "strict": true,
4    "noUncheckedIndexedAccess": true,
5    "baseUrl": ".",
6    "paths": {
7      "@/*": ["./src/*"]
8    }
9  }
10}

1src/
2  types/
3    user.ts
4    product.ts
5    api.ts
6    index.ts   ← re-export hết từ đây

1import { z } from 'zod'
2
3const RegisterSchema = z.object({
4  email: z.string().email('Email không hợp lệ'),
5  age: z.number().min(18, 'Phải đủ 18 tuổi'),
6  password: z.string().min(8),
7})
8
9type RegisterInput = z.infer<typeof RegisterSchema>

1// Dùng với react-hook-form
2import { zodResolver } from '@hookform/resolvers/zod'
3
4const form = useForm<RegisterInput>({
5  resolver: zodResolver(RegisterSchema),
6})
7
8// Dùng trong server action
9async function registerAction(formData: FormData) {
10  const result = RegisterSchema.safeParse({
11    email: formData.get('email'),
12    age: Number(formData.get('age')),
13    password: formData.get('password'),
14  })
15
16  if (!result.success) {
17    return { error: result.error.flatten() }
18  }
19  // result.data đã được type-safe hoàn toàn
20}

1// vitest.config.ts
2import { defineConfig } from 'vitest/config'
3import react from '@vitejs/plugin-react'
4
5export default defineConfig({
6  plugins: [react()],
7  test: {
8    environment: 'jsdom',
9    globals: true,
10    setupFiles: ['./src/test/setup.ts'],
11  },
12})

1import { describe, it, expect } from 'vitest'
2import { formatCurrency } from '@/lib/utils'
3
4describe('formatCurrency', () => {
5  it('format số tiền VND đúng cách', () => {
6    expect(formatCurrency(1000000)).toBe('1.000.000 ₫')
7  })
8
9  it('xử lý số âm', () => {
10    expect(formatCurrency(-500)).toBe('-500 ₫')
11  })
12})

1import { renderHook, act } from '@testing-library/react'
2import { useCounter } from '@/hooks/useCounter'
3
4it('increment counter đúng', () => {
5  const { result } = renderHook(() => useCounter())
6
7  act(() => {
8    result.current.increment()
9  })
10
11  expect(result.current.count).toBe(1)
12})

1import { render, screen } from '@testing-library/react'
2import userEvent from '@testing-library/user-event'
3import { LoginForm } from '@/components/LoginForm'
4
5describe('LoginForm', () => {
6  it('hiển thị lỗi khi submit form rỗng', async () => {
7    const user = userEvent.setup()
8    render(<LoginForm />)
9
10    // Arrange: form đã render
11    const submitButton = screen.getByRole('button', { name: /đăng nhập/i })
12
13    // Act: user click submit
14    await user.click(submitButton)
15
16    // Assert: lỗi hiện ra
17    expect(screen.getByText(/email không được để trống/i)).toBeInTheDocument()
18  })
19
20  it('call onSubmit với data đúng', async () => {
21    const user = userEvent.setup()
22    const mockSubmit = vi.fn()
23    render(<LoginForm onSubmit={mockSubmit} />)
24
25    await user.type(screen.getByLabelText(/email/i), 'test@example.com')
26    await user.type(screen.getByLabelText(/mật khẩu/i), 'password123')
27    await user.click(screen.getByRole('button', { name: /đăng nhập/i }))
28
29    expect(mockSubmit).toHaveBeenCalledWith({
30      email: 'test@example.com',
31      password: 'password123',
32    })
33  })
34})

1// tests/auth.spec.ts
2import { test, expect } from '@playwright/test'
3
4test('user đăng nhập thành công', async ({ page }) => {
5  await page.goto('/login')
6
7  await page.getByLabel('Email').fill('user@example.com')
8  await page.getByLabel('Mật khẩu').fill('correctpassword')
9  await page.getByRole('button', { name: 'Đăng nhập' }).click()
10
11  // Sau khi login, redirect về dashboard
12  await expect(page).toHaveURL('/dashboard')
13  await expect(page.getByText('Chào mừng trở lại')).toBeVisible()
14})
15
16test('hiển thị lỗi với credentials sai', async ({ page }) => {
17  await page.goto('/login')
18
19  await page.getByLabel('Email').fill('user@example.com')
20  await page.getByLabel('Mật khẩu').fill('wrongpassword')
21  await page.getByRole('button', { name: 'Đăng nhập' }).click()
22
23  await expect(page.getByText('Email hoặc mật khẩu không đúng')).toBeVisible()
24})

1# .github/workflows/ci.yml
2name: CI
3
4on: [push, pull_request]
5
6jobs:
7  test:
8    runs-on: ubuntu-latest
9    steps:
10      - uses: actions/checkout@v4
11
12      - uses: actions/setup-node@v4
13        with:
14          node-version: '20'
15          cache: 'npm'
16
17      - run: npm ci
18
19      - name: TypeScript check
20        run: npx tsc --noEmit
21
22      - name: Unit & Component tests
23        run: npx vitest run --coverage
24
25      - name: Install Playwright browsers
26        run: npx playwright install --with-deps chromium
27
28      - name: E2E tests
29        run: npx playwright test
30
31      - name: Build
32        run: npm run build

1// package.json
2{
3  "lint-staged": {
4    "*.{ts,tsx}": [
5      "eslint --fix",
6      "vitest related --run"
7    ]
8  }
9}