JS异步代码单元测试之神奇的Promise

JS异步代码单元测试一直是开发人员要面对的挑战。为了解决这个问题，Promise异步编程模式被引入到JavaScript中，因其简单、灵活和可重用性而受到广泛认可。在本攻略中，我们将深入探讨如何在单元测试中使用Promise，以及如何跟踪异步代码逻辑和处理可能的异步回调。

异步单元测试面临的问题

在传统的单元测试中，我们可以通过直接调用函数、对函数输出结果进行验证以及执行边缘情况测试等方式来确定函数行为是否正确。但是，当涉及到异步代码时，处理这些情况变得更加困难。异步代码返回的结果不会立即可用，而是在某个未来时间点以触发形式返回。

例如，我们要测试一个异步函数getUserData：

function getUserData(userId) {
  return new Promise((resolve,reject) => {
    fetch(`/users/${userId}`).then(response => {
      if(response.ok) {
        resolve(response.json());
      } else {
        reject(new Error('Error fetching user data'));
      }
    });
  });
}

测试时，我们要验证这个函数的结果是否正确。但是，在单元测试环境中，没有一个直接返回结果的机制。

使用Promise进行异步单元测试

考虑使用Promise来简化异步单元测试。我们使用done方法来告诉测试运行时当前的测试已完成。我们可以使用Promise的then和catch方法自动执行done方法。

例如，我们编写一个测试来验证getUserData函数是否返回一个正确的结果：

describe('getUserData', () => {
  test('returns user data', (done) => {
    getUserData(1).then(userData => {
      expect(userData.name).toBe('John');
      done();
    });
  });
});

在这个测试中，我们首先调用getUserData函数，然后使用then方法等待函数返回结果，一旦结果返回，就调用expect方法来验证返回值是否正确。一旦验证完成，就调用done方法来表示这个测试已经完成。

处理异步回调

在异步代码中，我们经常需要处理回调函数。幸运的是，Promise提供了then方法和catch方法来处理异步回调的结果。

例如，考虑下面的异步函数：

function submitForm(formData, successCallback, errorCallback) {
  submitData(formData).then(response => {
    if (response.status === 200) {
      successCallback(response.data)
    } else {
      errorCallback(new Error('Failed to submit form'))
    }
  }).catch(error => {
    errorCallback(new Error('Failed to submit form'))
  });
}

在这个函数中，submitData返回一个Promise，并使用then方法来处理响应。如果响应中的状态码为200，就调用successCallback回调函数，并将响应数据作为参数传递进去。如果状态码不是200，就调用errorCallback函数，并传递一个错误对象。

为了测试这个函数，我们可以使用jest.fn()模拟回调函数。例如，我们编写以下测试：

describe('submitForm', () => {
  const formData = { name: 'John', age: 30 };
  const successCallback = jest.fn();
  const errorCallback = jest.fn();

  test('calls the success callback with the returned data', (done) => {
    submitForm(formData, successCallback, errorCallback);
    setTimeout(() => {
      expect(successCallback).toHaveBeenCalledWith(formData);
      done();
    }, 100);
  });

  test('calls the error callback when the form submission fails', (done) => {
    submitForm({ invalidData: true }, successCallback, errorCallback);
    setTimeout(() => {
      expect(errorCallback).toHaveBeenCalled();
      done();
    }, 100);
  });
});

在这个测试中，我们使用jest.fn()来模拟successCallback和errorCallback回调函数，并传递它们作为参数给submitForm函数。我们稍微修改函数，让测试运行的时间更长一点，以便异步操作有足够的时间完成。在测试运行结束后，我们验证回调函数是否被调用。

Promise是处理异步单元测试的有效工具，它使我们能够轻松地处理异步代码和回调函数。通过使用Promise，开发人员可以更快地编写和运行异步单元测试，确保代码的正确性。