Jest 报错 TypeError: Cannot read property 'xxx' of undefined 的解决方法

前言

在前端开发中，我们经常会使用 Jest 进行自动化测试。但是在使用 Jest 进行测试时，可能会遇到报错 TypeError: Cannot read property 'xxx' of undefined 的问题。这个问题可能会让你束手无策，不知道该如何解决。本文将会介绍这个问题的原因，以及解决方法。

问题描述

在 Jest 进行测试时，如果使用到了某个对象或者变量，但是这个对象或者变量却是 undefined，就会出现 TypeError: Cannot read property 'xxx' of undefined 的报错。例如下面这段代码：

function foo() {
  console.log(a.b.c);
}

test('test foo', () => {
  foo();
});

输出的报错信息如下：

TypeError: Cannot read property 'b' of undefined

这个问题可能会让你感到困惑，因为你看着代码很明显对象 a 是已经定义好的，但是为什么却会出现 undefined 呢？

首先，我们需要了解一下 Jest 内部原理，Jest 是使用 JSDOM 运行测试的，JSDOM 是一个模拟浏览器环境的库，它可以让你在 Node.js 环境中运行大部分的浏览器内置 API，例如 window、document 等。而在浏览器环境中，一个全局变量不会因为未定义而报错，它只是一个 undefined 的值。但是在 Node.js 环境中，一个未定义的变量会直接报错。

因此，如果你在测试中使用了一个未定义的对象或者变量，就会出现 TypeError: Cannot read property 'xxx' of undefined 的报错，因为 Jest 会认为这个对象或者变量不存在。

解决方法

为了解决这个问题，我们可以通过检测对象或者变量是否为 undefined 来解决。下面是几种解决方法：

1. 使用默认值

在调用对象或者变量时，可以使用默认值来避免出现 undefined。例如：

function foo() {
  console.log((a || {}).b.c);
}

test('test foo', () => {
  foo();
});

这样，如果对象 a 未定义，就会使用一个空对象 {} 来代替，保证程序不会出现 undefined 的情况。

2. 使用断言

在测试中，我们可以使用 Jest 提供的断言函数来判断对象或者变量是否为 undefined。例如：

function foo() {
  expect(a).toBeDefined();
  console.log(a.b.c);
}

test('test foo', () => {
  foo();
});

在这个例子中，我们使用了 expect(a).toBeDefined() 来判断对象 a 是否已经定义。如果 a 未定义，就会直接抛出一个错误，而不会执行 console.log(a.b.c)。因此可以避免出现 TypeError: Cannot read property 'xxx' of undefined 的问题。

3. 使用可选链

在 ECMAScript 2020 中新增了一种写法，可以使用可选链来避免出现 undefined。例如：

function foo() {
  console.log(a?.b?.c);
}

test('test foo', () => {
  foo();
});

这样，就不需要再判断对象或者变量是否为 undefined 了，如果 a 未定义，就会直接返回 undefined，不会出现报错。

总结

在使用 Jest 进行测试时，如果出现了 TypeError: Cannot read property 'xxx' of undefined 的报错，这通常是因为对象或者变量未定义所造成的。我们可以使用默认值、断言或者可选链来解决这个问题。

以上是关于 Jest 报错 TypeError: Cannot read property 'xxx' of undefined 的解决方法的介绍，希望对你有所帮助。

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