Jest 测试中使用 Puppeteer 的最佳实践

在前端开发中，测试是非常重要的环节。而 Jest 作为目前最流行的前端测试框架，拥有着非常便捷的测试方式和出色的测试报告。但是 Jest 并不能测试一些 UI、DOM 相关的内容，这时候，我们就需要 Puppeteer 这个强大的工具了。

Puppeteer 是一个无界面的 Chrome 浏览器，它提供了非常完整的 Chrome 浏览器 API，并且可以在 Node.js 环境中直接使用。使用 Puppeteer 可以让我们实现很多传统测试框架无法实现的东西，如测试 canvas，测试一些交互逻辑等。

接下来，我们将探讨如何将 Jest 和 Puppeteer 结合使用，共同完成前端自动化测试。

安装与配置

我们需要先安装 Jest 和 Puppeteer。在终端执行以下命令即可：

npm install --save-dev jest puppeteer

当安装完 Puppeteer 后，我们还需要注意几点。

1. Puppeteer 默认会使用下载安装的 Chrome 浏览器，因此我们需要安装 Chrome 浏览器。

2. 如果无法下载 Puppeteer，可以尝试设置下载源为淘宝源，使用以下命令：

   npm config set puppeteer_download_host=https://npm.taobao.org/mirrors

配置完成后，我们需要在 Jest 配置中启用 Puppeteer。在 jest.config.js 文件中增加以下配置：

module.exports = {
  // ...
  testEnvironment: "jest-environment-puppeteer",
  // ...
}

这样就完成了 Jest 和 Puppeteer 的基本配置。

编写测试用例

接下来，我们将实现一些实际的测试用例，来更好地了解如何在 Jest 中使用 Puppeteer。

基本测试用例

我们先编写一个简单的测试用例，测试一个网页的标题是否正确。

// javascriptcn.com 代码示例
describe("Page title", () => {
  beforeAll(async () => {
    await page.goto("https://www.baidu.com/");
  });

  test("should be correct", async () => {
    const title = await page.title();
    expect(title).toBe("百度一下，你就知道");
  });
});

在这个测试用例中，我们使用了 describe 和 test，这两个函数都是 Jest 提供的测试用例函数。代码中的 beforeAll 函数会在所有测试用例之前执行一次，这里我们使用它来打开一个测试网页。

接着，我们使用了 Puppeteer 提供的 page.title() 方法，获取测试网页的标题。最后使用 Jest 提供的 expect 断言函数来判断标题是否正确。

对某个元素进行测试

下面我们来编写一个测试用例，测试某个按钮是否正确地执行了点击事件。

// javascriptcn.com 代码示例
describe("Click button", () => {
  beforeAll(async () => {
    await page.goto("https://example.com/");
  });

  test("should be clicked", async () => {
    await page.click("#btn");
    const value = await page.$eval("#input", (el) => el.value);
    expect(value).toBe("123");
  });
});

在这个测试用例中，我们首先使用了 Puppeteer 提供的 page.click 方法，模拟点击一个按钮。接着，我们使用了 Puppeteer 提供的 $eval 方法，获取测试网页上某个 input 元素的值。最后使用 Jest 提供的 expect 断言函数来判断值是否正确。

对某个表格进行测试

下面我们来编写一个测试用例，测试某个表格是否正确地渲染了数据。

// javascriptcn.com 代码示例
describe("Render table", () => {
  beforeAll(async () => {
    await page.goto("https://example.com/");
  });

  test("should render data", async () => {
    const rows = await page.$$("#table tr");

    const data = await Promise.all(
      rows.map(async (row) => {
        const cols = await row.$$("td");
        return cols.map(async (col) => await col.evaluate((node) => node.innerText))
      })
    );
    
    expect(data).toEqual([
      ["1", "Foo"],
      ["2", "Bar"],
      ["3", "Baz"],
    ]);
  });
});

在这个测试用例中，我们使用了 Puppeteer 提供的 page.$$ 方法，选择一组符合条件的元素，并将它们以数组的形式返回。然后我们使用了 Promise.all，对每个返回的元素使用 $ 方法获取到 tr 元素的所有子 td 元素。接着，我们对每个 td 元素使用 evaluate 方法获取其文本内容，并存储在 data 数组中。最后，使用 Jest 提供的 expect 断言函数来判断渲染的数据是否正确。

相关注意事项

在使用 Jest 和 Puppeteer 进行测试时，还需要注意以下几点。

1. 运行测试时，Puppeteer 会启动一个无头浏览器来执行测试。如果在测试过程中出现问题，可以使用 headless: false 参数禁用无头模式，来快速排查问题。

   const browser = await puppeteer.launch({ headless: false });

2. 在测试文件中，需要将 Puppeteer 的相关对象，如 page 和 browser，在测试用例之前就定义好。

   // javascriptcn.com 代码示例
   let browser;
   let page;
   
   beforeAll(async () => {
      browser = await puppeteer.launch();
      page = await browser.newPage();
   });
   
   afterAll(async () => {
      await browser.close();
   });

3. 在测试过程中，Puppeteer 相比于其他测试库会占用更多的 CPU 和内存资源。因此，如果需要执行大量的测试用例，建议使用第三方工具分批测试。

4. 在使用 Puppeteer 进行测试时，我们需要考虑到性能、内存等问题，避免过度滥用 Puppeteer，增加测试用例的复杂度和运行时间。

总结

本文主要介绍了 Jest 测试中使用 Puppeteer 的最佳实践。我们通过编写几个实际的测试用例，了解了如何使用 Puppeteer 进行页面元素测试，以及一些注意事项。希望这篇文章能够帮助到你，更好地了解 Jest 和 Puppeteer 在前端自动化测试中的应用。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f6e03ef6b2d6eab3f6aa5c