在前端开发中，单元测试是非常重要的一环。Jest 是一个流行的 JavaScript 单元测试框架，它提供了丰富的 API 和工具，可以帮助我们编写高质量的测试用例。但是，有时候我们会遇到 “Cannot read property 'xxx' of undefined” 的问题，这是因为在测试代码中使用了未定义或未初始化的变量或对象。本文将介绍如何解决这个问题，并提供示例代码。
问题描述
在 Jest 单元测试中，有时候会遇到类似下面的错误：
TypeError: Cannot read property 'xxx' of undefined
这个错误的意思是，我们在测试代码中访问了一个未定义或未初始化的变量或对象，并试图读取它的属性。例如，下面的代码就会触发这个错误：
test('test case', () => {
const obj = {};
expect(obj.xxx).toBe('yyy');
});在这个例子中，我们定义了一个空对象 obj，但是它并没有 xxx 属性。当我们试图读取 obj.xxx 的时候，就会触发上面的错误。
解决方法
要解决这个问题，我们需要确保在测试代码中使用的变量或对象都已经定义或初始化。具体来说，有以下几种方法可以解决这个问题：
1. 初始化变量或对象
在测试代码中，如果需要使用一个变量或对象，我们需要先确保它已经被定义或初始化。例如，如果我们需要测试一个函数，这个函数依赖一个对象 obj，那么我们需要先定义并初始化这个对象，然后再调用函数。示例代码如下：
test('test case', () => {
const obj = {xxx: 'yyy'};
const result = myFunc(obj);
expect(result).toBe('zzz');
});在这个例子中，我们定义了一个对象 obj，它有一个 xxx 属性。然后，我们调用一个函数 myFunc，这个函数依赖 obj 对象。由于我们已经初始化了 obj 对象，所以这个函数可以正常运行。
2. 使用默认值
如果变量或对象可能没有被定义或初始化，我们可以使用默认值来避免出现错误。例如，如果我们需要访问一个对象的属性，但是这个对象可能为空或未定义，我们可以使用默认值来避免触发错误。示例代码如下：
test('test case', () => {
const obj = null;
const value = obj?.xxx ?? 'default';
expect(value).toBe('default');
});在这个例子中，我们定义了一个空对象 obj，它没有任何属性。然后，我们使用了可选链运算符 ?. 和空值合并运算符 ??，来访问 obj.xxx 属性。由于 obj 为空，所以这个表达式会返回默认值 'default'。
3. 使用 Jest 提供的 API
Jest 提供了一些 API，可以帮助我们在测试代码中避免出现 “Cannot read property 'xxx' of undefined” 错误。例如，我们可以使用 toBeDefined 和 toBeUndefined 来判断一个变量或对象是否已经被定义或初始化。示例代码如下：
test('test case', () => {
const obj = null;
expect(obj).toBeUndefined();
});在这个例子中，我们断言 obj 变量是未定义的，这样就可以避免在后续代码中访问 obj.xxx 属性时出现错误。
总结
在 Jest 单元测试中遇到 “Cannot read property 'xxx' of undefined” 错误，通常是因为测试代码中使用了未定义或未初始化的变量或对象。为了解决这个问题，我们可以初始化变量或对象，使用默认值，或者使用 Jest 提供的 API。无论使用哪种方法，我们都应该确保在测试代码中使用的变量或对象都已经定义或初始化，以避免出现错误。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65df003e1886fbafa4c48fa9