Testing in NextJS

Mở đầu

NextJS là 1 framework hoàn toàn mới đối với mình đến khi tìm hiểu về nó mà khi nghe Testing Next thì ... bất ngờ chưa bà zà :)).

Theo như mình đọc Docs trên trang chủ của Next thì hiểu đơn giản là công việc của testing là kiểm tra những gì mình render ra giao diện (từng thẻ, từng component, dữ liệu đổ ra trong API...) thông qua một số công cụ testing như: Cypress, Playwright và Jest với thư viện của React.

Tiếp theo mình sẽ giới thiệu và demo một số testing tool trên.

1.Cypress

Cypress là một trình chạy thử nghiệm được sử dụng cho kiểm tra đầu cuối (End-to-End Testing E2E) và Kiểm tra tích hợp (Integration Testing).

Thiết lập Cypress cho dự án NextJS

• Bạn có thể cài đặt Cypress khi tạo dự án NextJS bằng npx thông qua terminal:

npx create-next-app@latest --example with-cypress next-base

hoặc có thể thêm Cypress vào dự án hiện có của bạn

npm install --save-dev cypress

• Sau đó, thêm Cypress vào trường script trong file package.json:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "cypress": "cypress open",
}

Đối với lần đầu cần chạy

npm run cypress

để thiết lập cấu trúc thư mục mà Cypress cung cấp thêm vào dự án. Bạn có thể tìm hiểu thêm các ví dụ tạo test của Cypress

Chạy thử

Sau khi npm run cypress, cypress hiện ra cửa sổ để chọn loại test:

• Mình chọn test End-to-End, sau đó chọn môi trường brower chạy test:

• Sau đó nó sẽ xuất hiện giao diện trên. Tạo một spec mới để tiến hành viết test.

• Chọn create new empty spec rồi lưu tên file:

• Khi create, cypress sẽ cho 1 đoạn code sẵn truy cập thành công đến  trang chủ của cypress như dưới đây và tiến hành test xem nó có pass không:

Vào lại project NextJS tiến hành viết code

Khi thiết lập chạy lần đầu Cypress, trong project Next sẽ có thêm folder cypress và các file như hình trên.

Khi thiết lập bên trên mình chọn E2E Testing do đó file spec test_hompage có path: cypress/e2e/test_homepage.cy.js

• Mình có code 2 pages như dưới đây

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

export default function Home() {
  return (
    <div>
        <Header/>
        <nav>
            <Link href="/about">
                <a>About</a>
            </Link>
        </nav>
    </div>
  )
}

// pages/about.js
export default function About() {
    return (
      <div>
        <h1>About Page</h1>
      </div>
    )
  }

• Viết lại test cho trang index trong file test_hompage.cy.js

describe('home_page', () => {
  it('access', () => {
    //check truy cập vào index page
    cy.visit('http://localhost:3000/')
  })

  it('Clicl button about', () => {
    //Tìm đến thẻ a có thuộc tính là href chứa about và thực hiện click
    cy.get('a[href*="about"]').click();

    //check tên url mới có chứa /about hay không
    cy.url().should('include', '/about');

    //check trang about có chứa thẻ H1 với nội dung là About Page không
    cy.get('h1').contains('About Page')
  })
})
  

• Tiến hành chạy test (chạy project lên trước)

npm run dev

npm run cypress

• Mình được kết quả như sau:

2.Playwright

Nó là một testing framework, cho phép automate test  Chromium, Firefox, và WebKit với 1 API duy nhất và có thể sử dụng nó để viết test trên tất cả các nền tảng.

Cài đặt

• Bạn có thể cài đặt playwright khi tạo dự án NextJS bằng npx .

npx create-next-app@latest --example with-playwright next-playwright

hoặc có thể thêm Cypress vào dự án hiện có của bạn

npm install --save-dev @playwright/test

• Sau đó, thêm Cypress vào trường script trong file package.json nếu chưa có:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "test:e2e": "playwright test"
}

Tạo test e2e và chạy

• Tạo code trong pages: index.js + about.js

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

export default function Home() {
  return (
    <div>
        <Header/>
        <nav>
            <Link href="/about">
                <a>About</a>
            </Link>
        </nav>
    </div>
  )
}

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Page</h1>
    </div>
  )
}

• Thêm 1 file test check hành động điều hướng từ trang index -> trang about (mặc định playwright sẽ tạo ra file test .ts tạo file .js cũng chạy được nhé)

import { test, expect } from '@playwright/test'

test('should navigate to the about page', async ({ page }) => {
  // Start from the index page (the baseURL is set via the webServer in the playwright.config.ts)
  await page.goto('http://localhost:3000/')
  // Find an element with the text 'About Page' and click on it
  await page.click('text=About')
  // The new URL should be "/about" (baseURL is used there)
  await expect(page).toHaveURL('http://localhost:3000/about')
  // The new page should contain an h1 with "About Page"
  await expect(page.locator('h1')).toContainText('About Page')
})
}

• Run: npm run test:e2e và ta được kết quả như sau

Có thể thấy playwright test trên 3 loại môi trường đồng thời và nhớ chạy project trước khi chạy test nhé!.

3. Jest and React Testing Library

Jest và React testing thường được sử dụng cùng nhau cho test unit. Có 3 cách để bắt đầu thiết lập test cho dự án :

• Tích hợp cùng khi tạo dự án next:

npx create-next-app@latest --example with-jest with-jest-app

• Thiết lập với Rust Compiler
• Thiết lập với Babel

Tổng kết

Qua một số chia sẻ trên của mình, hi vọng các bạn có thể hiểu về các chạy test NextJS thông qua 1 số tool. Cảm ơn mọi người đã đọc bài chia sẻ của mình!!!

Link tham khảo: