Jest與Jest Puppeteer結(jié)合實(shí)踐

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

1. 安裝依賴：

確保你已經(jīng)安裝了 Node.js 和 npm。然后，在項(xiàng)目根目錄下運(yùn)行以下命令來安裝 Jest 和 Jest Puppeteer：

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

2. 配置 Jest Puppeteer：

在項(xiàng)目根目錄下創(chuàng)建一個名為 jest-puppeteer.config.js 的文件，并添加以下內(nèi)容：

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

這里，我們配置了 Puppeteer 的啟動選項(xiàng)，例如是否以無頭模式運(yùn)行。同時(shí)，我們還配置了一個開發(fā)服務(wù)器，用于在測試之前啟動應(yīng)用程序。

3. 更新 package.json：

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

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

4. 編寫測試：

在項(xiàng)目根目錄下創(chuàng)建一個名為 __tests__ 的文件夾。在此文件夾中，創(chuàng)建一個名為 example.test.js 的文件，并添加以下內(nèi)容：

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

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

5. 運(yùn)行測試：

在終端中，運(yùn)行以下命令以執(zhí)行 E2E 測試：

npm run test:e2e

這將啟動開發(fā)服務(wù)器，運(yùn)行 Puppeteer，并執(zhí)行 __tests__ 文件夾中的所有測試。

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