使用 Jest 进行 E2E 测试的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

E2E（End-to-End）测试是一种全链路测试，主要用于测试应用程序的完整流程。在前端开发中，E2E测试可以验证整体与细节的一致性，节省手动测试的时间和精力。本文将重点介绍使用 Jest 进行 E2E 测试的最佳实践。

为什么选择 Jest？

Jest 是一种功能强大的 JavaScript 测试框架，已被广泛采用。它内置了断言库、模拟库和强大的测试运行程序，可以覆盖多种测试类型。Jest 提供了易于使用和理解的 API，可以有效简化测试的编写和维护。并且 Jest 对 React 应用有很好的支持，可以轻松测试 React 组件和应用程序。

E2E 测试的最佳实践

1. 使用 Puppeteer 进行浏览器控制

Puppeteer 是一个 Node.js 库，提供了控制 Chrome（或 Chromium）的高级 API，可以让我们无需人工干预便能操作浏览器。可以在 Jest 的每个测试用例中，使用 Puppeteer 来模拟用户操作，实现 E2E 测试。比如以下代码可以启动 Chromium 并打开百度网页：

const puppeteer = require('puppeteer')

describe('my test suite', () => {
  let browser
  let page

  beforeAll(async () => {
    browser = await puppeteer.launch()
    page = await browser.newPage()
  })

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

  it('should open baidu.com', async () => {
    await page.goto('https://www.baidu.com')
    const title = await page.title()
    expect(title).toBe('百度一下，你就知道')
  })
})

2. 使用节点选择器进行DOM操作

使用 Puppeteer 可以非常容易地模拟用户操作，但通过元素 id、class 或其他属性来选择和操作节点会非常笨拙，不容易维护。我们可以使用类似 jQuery 的现代选择器来选择节点并进行操作。

it('should click baidu search button', async () => {
  await page.goto('https://www.baidu.com')
  const searchInput = await page.$('#kw')
  await searchInput.type('Jest E2E testing')
  const searchButton = await page.$('input[value="百度一下"]')
  await searchButton.click()
  await page.waitForSelector('#content_left')
  const title = await page.title()
  expect(title).toBe('Jest E2E testing_百度搜索')
})

在这个例子中，我们首先选择输入框，输入搜索关键字，然后选择搜索按钮并单击它。最后等待搜索结果并验证页面标题。

3. 组合异步操作和超时设置

异步操作和异步等待是 E2E 测试必须考虑的重要问题。每个异步操作都可能会失败，导致测试用例失败。我们可以使用 Jest 提供的 async/await 语法来组合异步操作，并使用 setTimeout 设置超时时间。在设定超时时间时要根据实际情况设置，太短的时间会导致测试失败，太长的时间会浪费测试时间。

it('should call weather API', async () => {
  await page.goto('http://localhost:3000')
  const input = await page.$('#location')
  await input.type('London')
  const searchButton = await page.$('button')
  await searchButton.click()
  const weatherInfo = await page.waitForSelector('#weather-info', { timeout: 3000 })
  expect(weatherInfo).not.toBeNull()
})

在这个例子中，我们首先在搜索输入框中输入 "London"，然后单击按钮以触发搜索事件。我们使用 waitForSelector 指定要等待的元素选择器，如果找不到元素，等待将超时并抛出错误。

4. 适应性测试

最后，我们应该测试不同大小和分辨率的屏幕，以确保应用程序的适应性能满足要求。我们可以通过设置 viewport 和 emulate 选项来模拟不同的设备。下面的代码演示了如何测试移动设备的分辨率：

describe('mobile-friendly test suite', () => {
  let browser
  let page

  beforeAll(async () => {
    browser = await puppeteer.launch()
    page = await browser.newPage()
    await page.emulate({
      viewport: {
        width: 480,
        height: 800
      },
      userAgent: ''
    })
  })

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

  it('should show mobile layout', async () => {
    await page.goto('http://localhost:3000')
    const button = await page.$('button')
    expect(await button.boundingBox()).not.toBeNull()
  })
})

在这个例子中，我们将视口设置为宽度为 480 像素和高度为 800 像素的移动设备，并禁用「user agent」，以便在没有重定向的情况下访问我们的应用。我们使用了 boundingBox 方法来检查按钮的存在，这可以检查按钮是否在视口之内。

总结

本文介绍了如何使用 Jest 进行 E2E 测试的最佳实践，其中包括使用 Puppeteer 进行浏览器控制，使用节点选择器进行 DOM 操作，组合异步操作和超时设置，以及适应性测试。这些技巧将帮助您编写更清晰、更健壮的 E2E 测试用例，确保应用程序能够顺利地运行。

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

使用 Jest 进行 E2E 测试的最佳实践