在 Jest 中如何对 Promise 和 Async/Await 代码进行测试？-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，经常会遇到异步的操作，比如发送网络请求、定时器等。如何对这些异步操作进行测试呢？在 Jest 中，我们可以使用一些特殊的函数和语法来处理异步操作的测试，本文将详细介绍如何使用 Jest 进行 Promise 和 Async/Await 代码的测试。

Promise 测试

测试异步操作

在 Jest 中，我们可以使用 test 函数来编写测试用例，测试异步操作时，需要通过 async 关键字来定义一个异步的测试用例，并且在测试用例中使用 await 关键字来等待异步操作的结果。

例如，我们有如下的一个异步函数：

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('data')
    }, 1000)
  })
}

这个函数在 1 秒后会返回一个字符串 'data'。我们可以通过下面的测试用例来测试这个函数：

test('fetchData returns data', async () => {
  const data = await fetchData()
  expect(data).toBe('data')
})

这个测试用例使用了 async 关键字，表示这是一个异步的测试用例。在测试用例中调用 fetchData 函数并等待其返回结果，然后使用 expect 函数来判断返回结果是否为 'data'。

测试 Promise 失败

上述测试只考虑了 Promise 成功的情况，但如果 Promise 失败了，我们也需要编写测试用例来测试这种情况。

继续使用上面的例子，我们可以修改 fetchData 函数，使其在 1 秒后返回一个错误。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('error')
    }, 1000)
  })
}

我们可以编写如下测试用例来测试 Promise 失败的情况：

test('fetchData fails with an error', async () => {
  expect.assertions(1)
  try {
    await fetchData()
  } catch (e) {
    expect(e).toMatch('error')
  }
})

这个测试用例使用 try-catch 语句来捕获 Promise 的错误，然后使用 expect 函数来判断错误信息是否为 'error'，同时使用 expect.assertions 函数来指定期望的断言数量，确保测试用例中的断言得到执行。

Async/Await 测试

与 Promise 测试类似，我们也可以使用 async 关键字来定义异步的测试用例，使用 await 关键字来等待异步操作的结果，测试 Async/Await 代码。

例如，假设我们有如下的一个 Async/Await 函数：

async function fetchData() {
  const res = await fetch('https://jsonplaceholder.typicode.com/todos/1')
  const data = await res.json()
  return data
}

这个函数会从一个 API 中获取数据，并解析为 JSON 格式的数据。

我们可以编写如下的测试用例来测试这个函数：

// javascriptcn.com 代码示例
test('fetchData returns correct data', async () => {
  const data = await fetchData()
  expect(data).toEqual({
    userId: 1,
    id: 1,
    title: 'delectus aut autem',
    completed: false
  })
})

这个测试用例使用 async 关键字来定义异步的测试用例，等待 fetchData 函数返回结果后，使用 expect 函数来判断返回结果是否符合期望，使用 toEqual 方法来进行深度比较。

测试 Async/Await 失败

测试 Async/Await 代码失败的情况，与测试 Promise 失败类似，我们需要使用 try-catch 语句来捕获错误并使用 expect 函数来判断错误信息是否正确。

例如，对于上面的 fetchData 函数，如果 API 返回 404 错误，就会抛出错误。我们可以编写如下测试用例来测试这种情况：

test('fetchData throws an error when API returns 404', async () => {
  expect.assertions(1)
  try {
    await fetchData('https://jsonplaceholder.typicode.com/404')
  } catch (e) {
    expect(e).toMatch('Not Found')
  }
})

这个测试用例使用 try-catch 语句来捕获错误，然后使用 expect 函数来判断错误信息是否为 'Not Found'。

总结

在 Jest 中，我们可以使用 async 和 await 关键字来测试 Promise 和 Async/Await 代码，使测试变得更加简单和直观。同时，在测试 Promise 失败和 Async/Await 失败时，我们需要使用 try-catch 语句来捕获错误并使用 expect 函数来进行断言。希望本文能对你有所启发，使你更加熟练地使用 Jest 进行前端开发中的测试工作。

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