Jest 单元测试遇到 “TypeError: Cannot read property 'then' of undefined” 问题解决方法

在前端开发中，我们经常会使用 Jest 进行单元测试。但是在使用 Jest 进行测试的过程中，有时会遇到 “TypeError: Cannot read property 'then' of undefined” 的错误，这个错误的原因和解决方法就是本文要介绍的内容。

错误原因

这个错误的原因是在测试异步代码时，没有正确地使用异步测试的方式。在 Jest 中，我们可以使用 done 回调函数或者 async/await 来测试异步代码。如果没有使用这些方式，就会导致测试代码无法正确地处理异步代码的执行结果，从而出现上述错误。

解决方法

针对这个错误，我们可以采取以下几种解决方法。

使用 done 回调函数

在测试异步代码时，可以使用 done 回调函数来处理异步代码的执行结果。具体做法是，在测试函数中添加一个 done 参数，并在异步代码执行完成后调用 done 函数。下面是一个示例代码：

test('fetchData() returns data', (done) => {
  fetchData().then((data) => {
    expect(data).toEqual('data');
    done();
  });
});

在上述代码中，我们在测试异步函数 fetchData() 的返回结果是否为 'data'。在异步函数执行完成后，我们调用 done() 函数来通知测试代码已经完成。

使用 async/await

另一种处理异步代码的方式是使用 async/await。具体做法是，在测试函数前添加 async 关键字，并在测试异步代码的地方使用 await 关键字。下面是一个示例代码：

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

在上述代码中，我们使用 await 关键字来等待异步函数 fetchData() 的返回结果，并将结果赋值给 data 变量。然后我们使用 expect 断言来判断 data 变量是否等于 'data'。

使用 Promise

如果异步代码是基于 Promise 的，我们也可以直接在测试函数中返回 Promise 对象，而不是使用 done 回调函数或者 async/await。下面是一个示例代码：

test('fetchData() returns data', () => {
  return fetchData().then((data) => {
    expect(data).toEqual('data');
  });
});

在上述代码中，我们直接返回 fetchData() 函数的 Promise 对象，并在 then 回调函数中进行断言。

总结

在使用 Jest 进行单元测试时，处理异步代码的方式非常重要。如果没有正确地处理异步代码的执行结果，就会出现 “TypeError: Cannot read property 'then' of undefined” 的错误。本文介绍了三种处理异步代码的方式：使用 done 回调函数、使用 async/await 和直接返回 Promise 对象。在实际开发中，我们可以根据具体情况选择合适的方式来处理异步代码，以保证单元测试的正确性。

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