Jest與Jest Puppeteer結合實踐

Jest 和 Jest Puppeteer 可以很好地結合在一起，用于端到端（E2E）測試

1. 安裝依賴：

確保你已經安裝了 Node.js 和 npm。然后，在項目根目錄下運行以下命令來安裝 Jest 和 Jest Puppeteer：

npm install --save-dev jest jest-puppeteer puppeteer

2. 配置 Jest Puppeteer：

在項目根目錄下創建一個名為 jest-puppeteer.config.js 的文件，并添加以下內容：

module.exports = {
  launch: {
    headless: process.env.HEADLESS !== 'false',
  },
  server: {
    command: 'npm run start',
    port: 3000,
    launchTimeout: 10000,
    debug: true,
  },
};

這里，我們配置了 Puppeteer 的啟動選項，例如是否以無頭模式運行。同時，我們還配置了一個開發服務器，用于在測試之前啟動應用程序。

3. 更新 package.json：

在 package.json 文件中，添加或修改以下腳本：

{
  "scripts": {
    "test": "jest",
    "test:e2e": "jest --config=jest-puppeteer.config.js"
  }
}

4. 編寫測試：

在項目根目錄下創建一個名為 __tests__ 的文件夾。在此文件夾中，創建一個名為 example.test.js 的文件，并添加以下內容：

describe('Example E2E Test', () => {
  beforeAll(async () => {
    await page.goto('http://localhost:3000');
  });

  it('should display the correct title', async () => {
    const title = await page.title();
    expect(title).toBe('My App');
  });

  it('should have a button with the text "Click me!"', async () => {
    const buttonText = await page.$eval('button', (el) => el.textContent);
    expect(buttonText).toBe('Click me!');
  });
});

這個測試用例會檢查頁面標題是否正確，以及是否有一個按鈕顯示 “Click me!”。

5. 運行測試：

在終端中，運行以下命令以執行 E2E 測試：

npm run test:e2e

這將啟動開發服務器，運行 Puppeteer，并執行 __tests__ 文件夾中的所有測試。

通過這種方式，你可以使用 Jest 和 Jest Puppeteer 進行端到端測試，確保你的應用程序在各種瀏覽器和設備上正常工作。