[Next.js Tutorial] Testing: Hướng dẫn toàn tập về Unit, Integration và E2E Testing

Trong thế giới phát triển web hiện đại, việc xây dựng một ứng dụng Next.js mạnh mẽ, giàu tính năng là chưa đủ. Để đảm bảo ứng dụng hoạt động ổn định, đáng tin cậy và dễ dàng bảo trì trong dài hạn, testing chính là chiếc "chìa khóa vàng" không thể thiếu. 🔑

Bài viết này sẽ dẫn dắt bạn đi từ những khái niệm cơ bản nhất đến việc tự tin thiết lập và viết các loại test khác nhau cho dự án Next.js của mình. Dù bạn là người mới bắt đầu hay đã có kinh nghiệm, hãy cùng nhau khám phá thế giới testing đầy thú vị này!

Tại sao Testing lại quan trọng đến vậy? 🤔

Hãy tưởng tượng bạn vừa ra mắt một tính năng mới cho trang thương mại điện tử của mình. Vài giờ sau, khách hàng phàn nàn rằng họ không thể thêm sản phẩm vào giỏ hàng. Doanh thu sụt giảm, uy tín bị ảnh hưởng, và bạn phải thức đêm để tìm và sửa lỗi. Đây chính là cơn ác mộng mà testing giúp chúng ta ngăn chặn.

Testing trong Next.js mang lại những lợi ích vô giá:

• Phát hiện lỗi sớm: Giúp tìm ra và sửa lỗi ngay trong quá trình phát triển, tiết kiệm thời gian và chi phí.
• Tăng sự tự tin khi refactor code: Bạn có thể thoải mái cải tiến, tối ưu hóa code mà không lo làm hỏng các tính năng hiện có. Bộ test sẽ là "lưới an toàn" bảo vệ bạn.
• Cải thiện kiến trúc phần mềm: Việc viết code dễ test hơn thường dẫn đến kiến trúc sạch sẽ, module hóa và dễ hiểu hơn.
• Làm tài liệu sống: Các test case mô tả chính xác cách một component hay một hàm nên hoạt động, trở thành một nguồn tài liệu quý giá cho lập trình viên mới.
• Đảm bảo trải nghiệm người dùng: Giúp ứng dụng hoạt động mượt mà, đúng như mong đợi, giữ chân người dùng và nâng cao uy tín sản phẩm.

Các loại hình Testing phổ biến trong Next.js

Trong Next.js, chúng ta thường tập trung vào ba loại hình testing chính, tạo thành một "kim tự tháp testing" vững chắc.

1. Unit Testing (Kiểm thử đơn vị)

Đây là nền tảng của kim tự tháp. Unit test tập trung vào việc kiểm tra từng đơn vị code nhỏ nhất một cách riêng rẽ, chẳng hạn như một component, một hàm utility, hay một hook. Mục tiêu là để đảm bảo mỗi "viên gạch" này hoạt động chính xác.

• Công cụ phổ biến: Jest và React Testing Library (RTL). Jest cung cấp một môi trường testing mạnh mẽ (test runner, assertion library, mocking), trong khi RTL giúp bạn test các component React theo cách mà người dùng tương tác với chúng.

2. Integration Testing (Kiểm thử tích hợp)

Leo lên một bậc, integration test kiểm tra sự tương tác và phối hợp giữa nhiều đơn vị code với nhau. Ví dụ, bạn có thể test một trang hoàn chỉnh xem các component con có giao tiếp đúng cách và hiển thị dữ liệu từ API một cách chính xác hay không.

• Công cụ phổ biến: Vẫn là Jest và React Testing Library. Sự kết hợp này đủ mạnh để mô phỏng các tương tác phức tạp hơn giữa các component.

3. End-to-End (E2E) Testing (Kiểm thử đầu cuối)

Đây là đỉnh của kim tự tháp. E2E test tự động hóa một trình duyệt thực để kiểm tra toàn bộ luồng hoạt động của ứng dụng từ góc nhìn của người dùng. Ví dụ, một kịch bản E2E có thể là: mở trang chủ, tìm kiếm sản phẩm, thêm vào giỏ hàng, và tiến hành thanh toán.

• Công cụ phổ biến: Cypress và Playwright. Đây là những công cụ chuyên dụng cho phép bạn viết các kịch bản test mô phỏng hành vi người dùng một cách trực quan và mạnh mẽ.

Bắt tay vào việc: Setup môi trường Testing

Next.js đã tích hợp sẵn Jest, giúp việc cài đặt trở nên vô cùng đơn giản.

Bước 1: Cài đặt các thư viện cần thiết

Mở terminal trong thư mục dự án Next.js của bạn và chạy lệnh sau:

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

Bước 2: Cấu hình Jest

Tạo một file jest.config.js ở thư mục gốc của dự án với nội dung sau:

const nextJest = require('next/jest')

const createJestConfig = nextJest({
  // Cung cấp đường dẫn đến ứng dụng Next.js của bạn để load các file env và cấu hình
  dir: './',
})

// Thêm bất kỳ cấu hình tùy chỉnh nào cho Jest ở đây
const customJestConfig = {
  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testEnvironment: 'jest-environment-jsdom',
  moduleNameMapper: {
    // Xử lý alias đường dẫn '@/*' trong tsconfig.json
    '^@/components/(.*)$': '<rootDir>/components/$1',
    '^@/pages/(.*)$': '<rootDir>/pages/$1',
  },
}

module.exports = createJestConfig(customJestConfig)

Bước 3: Tạo file setup cho Jest

File này dùng để import các thư viện bổ trợ cho Jest, ví dụ như @testing-library/jest-dom để có những assertion tiện lợi hơn (như toBeInTheDocument()).

Tạo file jest.setup.js ở thư mục gốc:

// jest.setup.js
import '@testing-library/jest-dom'

Bước 4: Thêm script vào package.json

Mở file package.json và thêm script test vào:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
  "test": "jest",
  "test:watch": "jest --watch"
}

Bây giờ, bạn có thể chạy npm test để khởi động Jest.

Viết Test Case Đầu Tiên Của Bạn ✍️

Chúng ta sẽ bắt đầu với việc test một component đơn giản.

Ví dụ 1: Unit Test cho một Component Button

Giả sử bạn có một component Button trong components/Button.js:

// components/Button.js
export default function Button({ children, onClick }) {
  return <button onClick={onClick}>{children}</button>
}

Bây giờ, hãy tạo một file test. Thường thì chúng ta sẽ tạo một thư mục __tests__ hoặc đặt file test ngay cạnh file component.

Tạo file components/Button.test.js:

import { render, screen, fireEvent } from '@testing-library/react'
import Button from './Button'

describe('Button Component', () => {
  // Test case 1: Kiểm tra xem Button có hiển thị đúng text không
  it('renders a button with the correct text', () => {
    render(<Button>Click me</Button>)

    // Tìm button có text là "Click me"
    const buttonElement = screen.getByText(/Click me/i)

    // Khẳng định rằng button đó có trong DOM
    expect(buttonElement).toBeInTheDocument()
  })

  // Test case 2: Kiểm tra xem hàm onClick có được gọi khi click không
  it('calls onClick handler when clicked', () => {
    // Tạo một "hàm giả" (mock function)
    const handleClick = jest.fn()

    render(<Button onClick={handleClick}>Click me</Button>)

    const buttonElement = screen.getByText(/Click me/i)

    // Mô phỏng hành vi click của người dùng
    fireEvent.click(buttonElement)

    // Khẳng định rằng hàm giả đã được gọi đúng 1 lần
    expect(handleClick).toHaveBeenCalledTimes(1)
  })
})

Chạy npm test và bạn sẽ thấy kết quả "PASS". Chúc mừng, bạn đã viết thành công unit test đầu tiên!

Ví dụ 2: Integration Test cho một Trang HomePage

Giả sử trang chủ của bạn (pages/index.js) hiển thị một tiêu đề và một nút bấm để chuyển hướng.

// pages/index.js
import Link from 'next/link'

export default function HomePage() {
  return (
    <div>
      <h1>Welcome to our Website</h1>
      <Link href="/about">
        <a>Go to About Page</a>
      </Link>
    </div>
  )
}

File test pages/index.test.js:

import { render, screen } from '@testing-library/react'
import HomePage from './index'

describe('HomePage', () => {
  it('renders a heading and a link', () => {
    render(<HomePage />)

    // Kiểm tra tiêu đề
    const heading = screen.getByRole('heading', {
      name: /welcome to our website/i,
    })
    expect(heading).toBeInTheDocument()

    // Kiểm tra link
    const link = screen.getByRole('link', {
      name: /go to about page/i,
    })
    expect(link).toBeInTheDocument()
    expect(link).toHaveAttribute('href', '/about')
  })
})

Test này đảm bảo rằng các thành phần trên trang chủ không chỉ hiển thị mà còn được liên kết với nhau một cách chính xác.

Chinh phục E2E Testing với Cypress

Trong khi Jest và RTL rất tuyệt vời cho unit và integration test, Cypress là "nhà vua" của E2E testing.

Setup Cypress

1. Cài đặt: npm install --save-dev cypress
2. Mở Cypress: npx cypress open

Lần đầu chạy, Cypress sẽ tự động tạo ra một cấu trúc thư mục (cypress/) với các file ví dụ.

Viết một kịch bản E2E đơn giản

Hãy viết một test để đảm bảo người dùng có thể điều hướng từ trang chủ đến trang "About".

Tạo file cypress/e2e/navigation.cy.js:

describe('Navigation', () => {
  it('should navigate to the about page', () => {
    // 1. Bắt đầu từ trang chủ
    cy.visit('http://localhost:3000/')

    // 2. Tìm link có chứa chữ "About" và click vào nó
    cy.get('a[href*="about"]').click()

    // 3. URL mới nên chứa "/about"
    cy.url().should('include', '/about')

    // 4. Trang mới nên có một thẻ h1 với nội dung "About Page"
    cy.get('h1').contains('About Page')
  })
})

Để chạy test này, bạn cần khởi động server dev của Next.js (npm run dev) ở một terminal, và chạy npx cypress open ở terminal khác rồi chọn file test navigation.cy.js để xem Cypress thực thi kịch bản một cách trực quan.

Best Practices - Những lời khuyên vàng

Nếu tới đây, bạn đã chuẩn bị áp dụng Testing cho dự án Next.js của mình, dưới đây là những lời khuyên hữu ích:

• Test hành vi, không phải chi tiết triển khai: Đừng test state hay props của component. Hãy test xem với một input nhất định, component có tạo ra output (UI) đúng như người dùng thấy hay không. React Testing Library được thiết kế để khuyến khích điều này.
• Viết test dễ đọc: Đặt tên test case rõ ràng theo kịch bản: it('should do X when Y happens').
• Giữ test độc lập: Mỗi test case không nên phụ thuộc vào kết quả của test case khác.
• Cân bằng các loại test: Tập trung viết nhiều unit test, ít integration test hơn và chỉ một số E2E test quan trọng cho các luồng chính. Đừng lạm dụng E2E test vì chúng chậm và khó bảo trì.
• Tích hợp vào CI/CD: Chạy test tự động mỗi khi có code mới được đẩy lên (ví dụ: dùng GitHub Actions) để đảm bảo không có lỗi nào lọt qua.

Kết luận: Testing không phải là phần công việc nhàm chán

Testing không phải là một công việc nhàm chán hay gánh nặng. Đó là một khoản đầu tư thông minh cho tương lai của dự án. Bằng cách áp dụng Jest, React Testing Library và Cypress, bạn có thể xây dựng một hệ thống phòng thủ vững chắc, giúp ứng dụng Next.js của bạn trở nên mạnh mẽ, đáng tin cậy và sẵn sàng để phát triển.

Hãy bắt đầu viết test ngay hôm nay. Có thể ban đầu sẽ hơi lạ lẫm, nhưng khi bộ test của bạn lớn dần và cứu bạn khỏi những lỗi không đáng có, bạn sẽ thấy nó xứng đáng đến nhường nào. Chúc bạn thành công trên hành trình chinh phục testing trong Next.js!