Jest 报错：TypeError: Cannot read property 'xxx' of undefined

Jest 报错：TypeError: Cannot read property 'xxx' of undefined

在前端开发中，Jest是一个广泛使用的测试框架，它可以帮助我们更轻松地进行单元测试和集成测试。但是有时在使用Jest进行测试时，会遇到会出现TypeError: Cannot read property 'xxx' of undefined报错的情况。本文详细介绍了这一问题的原因以及解决方法，希望能对读者有所帮助。

问题原因

在Jest中，当我们对某个对象或数组进行测试或操作时，有时候会出现undefined的情况，这时可能会出现Cannot read property 'xxx' of undefined错误。这个错误提示表明，我们尝试访问一个不存在的属性或方法，或者是我们访问了一个未定义的对象。

示例代码

以下是一个示例代码，它是一个非常简单的函数，用于从一个对象中获取指定的属性。如果该属性不存在，则返回undefined。

function getProperty(obj, prop) {
  return obj[prop];
}

为了测试这个函数，我们可以编写以下的测试用例：

test('getProperty should return undefined for non-existent props', () => {
  const obj = { a: 1, b: 2, c: 3 };
  expect(getProperty(obj, 'd')).toBeUndefined();
});

在这个测试用例中，我们期望getProperty函数返回undefined，因为我们尝试访问一个不存在的属性d。

问题解决方法

为了解决这个错误，我们需要先判断变量是否为undefined，再访问它的属性或方法。

1. 使用Optional chaining

从TypeScript 3.7开始，一个新的操作符?.被添加进来，可以帮助我们更方便地访问对象的属性和方法。它被称为“Optional chaining”操作符。

这个操作符可以用于访问可能为null或undefined的属性或方法，如果这个属性或方法存在，它就会返回它的值，否则返回undefined。

下面是一个简单的示例，展示了如何使用Optional chaining操作符，以避免出现Cannot read property 'xxx' of undefined 错误。

const obj = {
  foo: {
    bar: 42
  }
};

console.log(obj?.foo?.bar); // Prints 42
console.log(obj?.foo?.baz?.qux); // Prints undefined

如果foo属性不存在，或者bar属性不存在，Optional chaining操作符都不会引发异常。

在Jest中，我们可以编写这样的测试用例：

test('getProperty should return undefined for non-existent props', () => {
  const obj = { a: 1, b: 2, c: 3 };
  expect(getProperty(obj, 'd')?.foo?.bar).toBeUndefined();
});

如果getProperty(obj, 'd')返回undefined，那么Optional chaining操作符会返回undefined，避免了报错。

1. 使用条件语句

另外一种解决方法是使用条件语句，在访问属性或方法之前，先判断变量是否为undefined。

以下是一个示例代码：

function getProperty(obj, prop) {
  if (!obj) {
    return undefined;
  }
  
  return obj[prop];
}

在Jest中，我们可以编写这样的测试用例：

test('getProperty should return undefined for non-existent props', () => {
  const obj = { a: 1, b: 2, c: 3 };
  expect(getProperty(obj, 'd')?.foo?.bar).toBeUndefined();
});

这个测试用例相当于先使用getProperty访问了undefined，然后使用Optional chaining操作符，避免了Cannot read property 'foo' of undefined错误的产生。

总结

Jest是前端开发中广泛使用的测试框架，但是在测试过程中会出现TypeError: Cannot read property 'xxx' of undefined的报错。这个错误提示表明我们尝试访问一个不存在的属性或方法，或者访问了一个未定义的对象。为了解决这个问题，我们可以使用Optional chaining或条件语句，避免出现这种错误。在编写测试用例时，我们需要注意变量是否为undefined，避免在访问属性或方法时产生错误。

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