Jest 前端自动化测试基础 (二): 异步代码测试及其回调函数

2023-10-28 05:19:10

前言

在上一篇文章中，我们介绍了Jest的基本语法和一般套路。在本文中，我们将继续深入探索Jest，重点关注异步代码的测试。异步代码在前端开发中非常常见，例如网络请求、定时器和事件处理程序。为了确保异步代码的正确性，我们需要对其进行测试。

异步代码的测试

Jest提供了多种方法来测试异步代码。最常见的方法是使用回调函数。回调函数是一种在异步操作完成后调用的函数。在Jest中，我们可以使用done()函数来测试回调函数。done()函数会告诉Jest等待回调函数被调用，然后再继续执行测试。

// 假设我们有一个接收一个callback函数为参数的fetchData函数，会在一段时间后调用callback
function fetchData(callback) {
  setTimeout(() => {
    callback('Hello, Jest!');
  }, 1000);
}

// 使用Jest测试fetchData函数
test('fetchData should call the callback with the correct data', (done) => {
  fetchData((data) => {
    expect(data).toBe('Hello, Jest!');
    done();
  });
});

在上面的示例中，我们使用fetchData()函数来测试异步代码。我们使用done()函数来告诉Jest等待回调函数被调用，然后再继续执行测试。当回调函数被调用时，它会将'Hello, Jest!'作为参数传递给expect()函数。expect()函数会检查data是否等于'Hello, Jest!'，如果相等，则测试通过。

使用Jest内置的promise支持

Jest内置了对promise的支持，这使得异步测试更加简单。我们可以使用await来等待promise被解析。

// 假设我们有一个返回一个promise的fetchData函数
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Hello, Jest!');
    }, 1000);
  });
}

// 使用Jest测试fetchData函数
test('fetchData should resolve with the correct data', async () => {
  const data = await fetchData();
  expect(data).toBe('Hello, Jest!');
});

在上面的示例中，我们使用fetchData()函数来测试异步代码。我们使用await关键字来等待fetchData()函数返回的promise被解析。当promise被解析后，它会将'Hello, Jest!'作为参数传递给expect()函数。expect()函数会检查data是否等于'Hello, Jest!'，如果相等，则测试通过。