使用 Jest 和 Puppeteer 进行 E2E 测试-JavaScript中文网-JavaScript教程资源分享门户

前端开发人员经常会面临测试的挑战，尤其是在应用程序需要与多个组件和平台进行交互的情况下。在这种情况下，端到端(E2E)测试是一个非常有用的工具，可以保证你的应用在所有方面都是完整、可靠的，并且能够满足用户需求。在本文中，我们将介绍 Jest 和 Puppeteer ，两个非常流行的 JavaScript 工具，以及如何使用它们进行 E2E 测试，同时还会探讨一些最佳实践。

Jest 是什么

Jest 是 Facebook 开源的 JavaScript 测试框架，由于其调试速度快，易于集成和使用，因此越来越受到 JavaScript 社区的关注。 Jest 支持包括断言和 mock 在内的基于行为驱动开发(BDD)和测试驱动开发(TDD)的测试风格，同时具有自动化测试、快照测试、覆盖率测试等多种功能。

Puppeteer 是什么

Puppeteer 是一个用于控制 Chrome 或 Chromium 浏览器的 Node.js 库。它提供了一个高度可控的浏览器环境，能够模拟用户的各种操作，例如单击、选中、拖放等。使用 Puppeteer 可以轻松地进行 E2E 测试，特别是针对那些依赖于DOM的应用程序。

安装 Jest 和 Puppeteer

首先，我们需要全局安装 Jest 和 Puppeteer ，请按照以下步骤操作：

npm install --save-dev jest puppeteer

这将在当前项目中安装 Jest 和 Puppeteer。

编写 E2E 测试用例

在开始编写测试用例之前，我们需要定义一个测试套件，并在其中引入 Puppeteer。可以通过以下函数轻松地创建一个测试套件：

// javascriptcn.com 代码示例
const { chromium } = require('playwright');
const URL = 'https://www.google.com';

describe('Google search', () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await chromium.launch();
    page = await browser.newPage();
    await page.goto(URL);
  });

  afterAll(async () => {
    await browser.close();
  });

  it('should open the Google search page', async () => {
    const pageTitle = await page.title();
    expect(pageTitle).toBe('Google');
  });
});

在这个示例中，我们定义了一个名为“Google search”的测试套件，并在其中创建了一个名为“should open the Google search page”的测试用例。我们使用了 Puppeteer 提供的 chromium 对象，创建了一个新的页面并导航到 Google 的主页。通过调用 assert 方法，我们确认了该页面是否真正打开。

使用 Jest 和 Puppeteer 进行截图

Puppeteer 还提供了一个非常有用的功能，可以将页面截图保存为图像文件。 Jest 具有内置的断言库，可以使用 expect 和 toMatchImageSnapshot 方法将页面截图与预期结果进行比较。请看下面的代码：

// javascriptcn.com 代码示例
import { chromium } from 'playwright';
import { toMatchImageSnapshot } from 'jest-image-snapshot';

expect.extend({ toMatchImageSnapshot });

describe('Google search', () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await chromium.launch();
    page = await browser.newPage();
    await page.goto(URL);
  });

  afterAll(async () => {
    await browser.close();
  });

  it('should match the expected screenshot', async () => {
    const screenshot = await page.screenshot();
    expect(screenshot).toMatchImageSnapshot();
  });
});

在这个示例中，我们只是添加了一个新的测试用例来生成页面截图，并使用 expect 和 toMatchImageSnapshot 断言方法将其与预期的屏幕截图进行比较。如果截图与预期结果不同，该测试用例将失败。

总结

在本文中，我们介绍了 Jest 和 Puppeteer 两个工具，并展示了如何在测试套件中使用它们进行 E2E 测试。我们还简要介绍了 Puppeteer 提供的一些常见功能，例如控制浏览器、模拟用户操作和截图等。使用这些工具，我们可以轻松地确定应用程序是否符合预期，并更好地保障代码的质量。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65372c667d4982a6ebf93228