Jest 如何对异步代码进行单元测试？

在前端开发中，我们经常需要编写处理异步逻辑的代码。而在编写单元测试时，对于有异步逻辑的代码的测试则需要特别注意。Jest 是一个流行的 JavaScript 测试框架，它可以方便地对异步代码进行测试。

使用 done 回调函数

测试异步代码最简单的方法就是使用 Jest 提供的 done 回调函数。当测试用例包含一个 done 参数时，Jest 会等待这个函数被调用才会结束测试。

例如，我们要测试一个异步获取用户信息的函数：

function getUserInfo(userId, callback) {
  setTimeout(() => {
    const userInfo = { id: userId, name: 'Alice' };
    callback(userInfo);
  }, 1000);
}

我们首先需要指定测试用例包含一个参数为 done 的回调函数。当异步操作完成后，我们调用 done 函数来告诉 Jest 测试已经完成了。

test('Test getUserInfo', (done) => {
  getUserInfo(1, (userInfo) => {
    expect(userInfo).toEqual({ id: 1, name: 'Alice' });
    done();
  });
});

使用 Promise

除了回调函数外，我们也可以使用 Promise 来测试异步代码。我们可以在测试用例中返回一个 Promise，然后在 Promise 中执行异步操作和断言。

例如，我们要测试一个基于 Promise 的异步函数：

function getUserInfoPromise(userId) {
  return new Promise((resolve) => {
    setTimeout(() => {
      const userInfo = { id: userId, name: 'Alice' };
      resolve(userInfo);
    }, 1000);
  });
}

我们可以直接在测试用例中返回 Promise，然后在 Promise 中断言：

test('Test getUserInfoPromise', () => {
  return getUserInfoPromise(1).then((userInfo) => {
    expect(userInfo).toEqual({ id: 1, name: 'Alice' });
  });
});

使用 async/await

另一种测试异步代码的方法是使用 async/await。这种方式可以更清晰地表达测试代码的逻辑。我们可以在测试用例中使用 async 关键字来定义一个异步函数，然后使用 await 来等待异步操作完成。

例如，我们要测试一个基于 async/await 的异步函数：

async function getUserInfoAsync(userId) {
  return new Promise((resolve) => {
    setTimeout(() => {
      const userInfo = { id: userId, name: 'Alice' };
      resolve(userInfo);
    }, 1000);
  });
}

我们使用 async/await 来测试异步代码，代码看起来更加简洁：

test('Test getUserInfoAsync', async () => {
  const userInfo = await getUserInfoAsync(1);
  expect(userInfo).toEqual({ id: 1, name: 'Alice' });
});

总结

在 Jest 中测试异步代码有多种方式，包括使用回调函数、Promise 或 async/await。选择哪种方式取决于开发者的个人喜好和项目需求。无论使用哪种方式，都需要确保测试代码覆盖到了异步处理的各种情况，以保证代码质量和可靠性。

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