当我们使用 Jest 进行前端开发时，经常会遇到类似这样的错误信息： “TypeError: Cannot read property 'xxx' of undefined” 。这个错误提示告诉我们，我们正在尝试读取一个未定义的对象的属性。
那么该怎样解决这个错误呢？在本文中，我们将讨论几个可能导致这个错误的原因，并提供解决方案。
1. 什么是“TypeError: Cannot read property 'xxx' of undefined” 错误？
这个错误提示的意思是，我们尝试读取 undefined 对象的 xxx 属性。这通常发生在我们尝试访问一个对象嵌套的属性时，而中间的对象可能是 undefined。
例如，我们有如下的代码：
const obj = { foo: { bar: 'baz' } } const value = obj.foo.qux
这段代码中，我们尝试读取 foo 对象下的 qux 属性。但是，由于 foo 对象并不存在 qux 属性，因此会抛出 “Cannot read property 'qux' of undefined” 错误。
2. 可能导致这个错误的原因
通常情况下，在 Jest 中出现这个错误的原因有以下几个：
2.1.对象未初始化
如果我们尝试读取一个未初始化的对象的属性，就会出现这个错误。例如：
const obj; const value = obj.foo
这里，我们没有初始化 obj 对象，尝试读取其 foo 属性会导致出错。
2.2.属性名错误
如果我们尝试读取一个对象不存在的属性，也会出现这个错误。例如：
const obj = { foo: 'bar' } const value = obj.qux
这里，我们尝试读取 obj 对象下 qux 属性，但是该属性并不存在。
2.3.异步操作导致的延迟
如果我们尝试访问一个尚未完成的异步操作返回的结果，可能会出现这个错误。例如：
const fetchData = async () => { const result = await fetch('http://api.example.com/foo') return result.json() } const value = fetchData().foo
这里，fetchData 等待一个异步操作返回的结果，并尝试访问 foo 属性。但是，由于异步操作尚未完成，返回的结果可能尚未包含 foo 属性，因此会出现错误。
3. 解决方案
要解决这个错误，我们需要考虑出现错误的代码并排除错误产生的原因。具体的方法如下：
3.1. 检查对象是否已初始化
首先，我们需要检查对象是否已初始化。如果没有初始化，我们应该初始化它并确保它具有所需的属性。例如：
-- -------------------- ---- ------- ----- --- - -- ----- ----- - ------- ------------------------- ----------------------------- ------- - ----- ----------------------------- ---------------------------展开代码
这里，我们初始化 obj 对象，并尝试访问其 foo 属性，在确定属性存在后，我们将该属性设置为 'bar'。
3.2. 确认属性名是否拼写正确
如果属性名被拼写错误，我们需要将其更正为正确的属性名。例如：
-- -------------------- ---- ------- ----- --- - - ---- ----- - ----- ----- - ------- ----------------------------- --------------------------- -------------------------------展开代码
这里，我们首先尝试访问对象不存在的 qux 属性，确认该属性不存在后，我们正确地读取 foo 属性的值。
3.3. 等待异步操作完成
如果我们尝试访问一个异步操作返回的结果，我们需要等待该操作完成，确保结果已包含所需的属性。例如：
-- -------------------- ---- ------- ----- --------- - ----- -- -- - ----- ------ - ----- ----------------------------------- ------ ------------- - ----- ------------- - ----- -- -- - ----- ------ - ----- ----------- -------------------------------- ------------------------------ - --------------- ------ ------ -------- -------- --------------展开代码
这里，我们等待异步操作 fetchData 完成，并在确认操作返回的结果中包含所需的 foo 属性后，进行测试。
总结
在 Jest 中，出现 “TypeError: Cannot read property 'xxx' of undefined” 错误通常是因为我们尝试访问未定义对象的属性。要解决这个错误，我们需要确认对象已经初始化、属性名正确拼写和等待异步操作完成。通过遵循以上这些原则，我们可以避免出现这个错误，并写出更健壮的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c21f7183d39b488163d2c1
