在前端开发中，Jest 是一个非常流行的 JavaScript 测试框架，它可以帮助我们快速编写和运行单元测试、集成测试和端到端测试等。然而，有时候我们在运行 Jest 测试时，可能会遇到一个常见的错误信息："TypeError: Cannot read property 'xxx' of null"。这个错误信息通常意味着我们的代码中存在某个变量或属性为空值（null），而我们试图去访问它的属性或方法，从而导致了运行时错误。
那么，当我们遇到这个错误信息时，应该怎么办呢？下面是一些可能的解决方法和建议。
1. 确认出错的代码行
首先，我们需要确认错误发生的具体位置。在 Jest 中，通常会在控制台输出类似下面的错误信息：
TypeError: Cannot read property 'xxx' of null
at Object.<anonymous> (/path/to/your/test.js:11:22)
at Object.asyncJestTest (/path/to/your/node_modules/jest-jasmine2/build/jasmineAsyncInstall.js:106:37)
at /path/to/your/node_modules/jest-jasmine2/build/queueRunner.js:45:12
at new Promise (<anonymous>)
at mapper (/path/to/your/node_modules/jest-jasmine2/build/queueRunner.js:28:19)
at /path/to/your/node_modules/jest-jasmine2/build/queueRunner.js:75:41
at processTicksAndRejections (internal/process/task_queues.js:97:5)其中，“/path/to/your/test.js:11:22” 表示错误发生在测试文件中的第 11 行第 22 列。我们可以根据这个信息找到对应的代码行，并检查其中的变量和属性是否为空值。
2. 检查变量和属性是否为空值
一旦我们确认了错误发生的位置，就需要检查相应的变量和属性是否为空值。通常情况下，我们可以使用 JavaScript 的条件语句（如 if、try-catch 等）来判断变量或属性是否为 null 或 undefined，并在必要时进行处理或报错。
例如，下面是一段可能会导致 "TypeError: Cannot read property 'xxx' of null" 错误的代码：
const data = fetchData(); const result = data.xxx;
在这里，如果 fetchData() 方法返回的数据为 null 或 undefined，那么访问其属性 xxx 就会导致错误。为了避免这种情况，我们可以添加一个条件语句来判断 data 是否为 null 或 undefined：
const data = fetchData();
if (data !== null && data !== undefined) {
const result = data.xxx;
} else {
throw new Error("Data is null or undefined");
}这样，如果 data 为 null 或 undefined，就会抛出一个错误，从而避免了 "TypeError: Cannot read property 'xxx' of null" 错误的发生。
3. 使用 Jest 提供的工具函数
除了手动检查变量和属性是否为空值之外，我们还可以使用 Jest 提供的一些工具函数来帮助我们进行更方便和可靠的测试。例如，Jest 提供了 toBeNull 和 toBeUndefined 等匹配器（Matcher），可以用来判断变量或属性是否为 null 或 undefined。
下面是一个使用 toBeNull 匹配器的示例代码：
test("fetchData() should return null", () => {
const data = fetchData();
expect(data).toBeNull();
});在这里，我们使用 expect(data).toBeNull() 来判断 fetchData() 方法返回的数据是否为 null。如果该测试用例通过，就说明 fetchData() 返回的数据确实是 null，而不是其他的值（如 undefined 或空对象等）。
类似地，我们还可以使用 toBeUndefined 匹配器来判断变量或属性是否为 undefined，如下所示：
test("fetchData() should return undefined", () => {
const data = fetchData();
expect(data).toBeUndefined();
});4. 总结
在本文中，我们介绍了当 Jest 运行时出现 "TypeError: Cannot read property 'xxx' of null" 错误时，可能的解决方法和建议。总的来说，我们需要确认错误发生的位置，检查相应的变量和属性是否为空值，使用条件语句或 Jest 提供的工具函数来避免空值错误的发生。通过这些方法，我们可以更好地编写和运行 Jest 测试，并提高代码的可靠性和稳定性。
参考代码：
-- -------------------- ---- -------
-------- ----------- -
------ -----
-
----------------- ------ ------ ------ -- -- -
----- ---- - ------------
------------------------
---
----------------- ------ ----- ------- -- -- -
----- ---- - ------------
-- ----- --- ---- -- ---- --- ---------- -
----- ------ - ---------
- ---- -
----- --- ----------- -- ---- -- ------------
-
---来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660f65f1d10417a222fde673