E2E Test vs. Unit Test

End-to-End Test (E2E Test)可以用不同語言寫測試腳本，但是，由於是透過網頁介面去測試，所以，跟開發的語言無關，然而，Unit Test就不一樣了，Unit Test是針對程式的單元，例如一個檔案、元件或一個類別去測試，所以，就會跟開發語言有很密切的關係了。

Testing (目前內容是以Page router為例，還沒有App Router的內容，不過，絕大部分內容都適用)

Cypress (Component/Unit Test & E2E Test)

E2E Test，做法跟selenium很類似，打開網頁並執行動作
E2E測試框架Cypress教學與其他框架比較
Cypress vs Selenium: Key Differences

describe('Navigation', () => {
  it('should navigate to the about page', () => {
    // Start from the index page
    cy.visit('<http://localhost:3000/>')
 
    // Find a link with an href attribute containing "about" and click it
    cy.get('a[href*="about"]').click()
 
    // The new url should include "/about"
    cy.url().should('include', '/about')
 
    // The new page should contain an h1 with "About page"
    cy.get('h1').contains('About Page')
  })
})

Unit Test的寫法就不是打開網頁，而是去mount一個元件，並檢查元件裡的內容。

import AboutPage from './about.js'
 
describe('<AboutPage />', () => {
  it('should render and display expected content', () => {
    // Mount the React component for the About page
    **cy.mount(<AboutPage />)**
 
    // The new page should contain an h1 with "About page"
    cy.get('h1').contains('About Page')
 
    // Validate that a link with the expected URL is present
    // *Following* the link is better suited to an E2E test
    cy.get('a[href="/"]').should('be.visible')
  })
})

Playwright (E2E Test)，可以看得出來跟Selenium的測試腳本滿像的
- Playwright vs Selenium: Which to choose?

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')
})

Jest and React Testing Library (Unit Test)，可以看得出來是透過render一個元件，並檢查元件裡的內容。

import { render, screen } from '@testing-library/react'
import Home from '../pages/index'
import '@testing-library/jest-dom'
 
describe('Home', () => {
  it('renders a heading', () => {
    **render(<Home />)**
 
    const heading = screen.getByRole('heading', {
      name: /welcome to next\\.js!/i,
    })
 
    expect(heading).toBeInTheDocument()
  })
})