Enzyme 是 React 生态中常用的测试工具之一，它通过提供一系列 API，使得我们可以轻松地对 React 组件进行测试。然而，有些时候我们会遇到 Cannot read property 'something' of undefined 这样的错误，让我们的测试无法正常执行。本文将介绍这个常见的问题以及解决方法。
问题介绍
当我们测试组件时，往往需要用到一些 props 或者 state。然而，有些时候我们并没有为某个 prop 或者 state 设置默认值，这个时候如果某个测试用例中我们忘记传入对应的 prop 或者 state，就会出现 Cannot read property 'something' of undefined 的错误。下面是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- --- ------- --------- -- -- -
----- ------- - -------------------- ----
------------------------------------------------- ---------
---
---假设我们的 MyComponent 组件依赖于一个名为 message 的 prop，它的值作为 h1 标签的文本内容。在上面的测试用例中，我们忘记给 MyComponent 传入 message 属性。这个时候，我们会看到一个错误信息：Cannot read property 'message' of undefined。
解决方法
为了解决上面的问题，我们需要做两个步骤：
- 给 props 或者 state 设置默认值
为了避免出现 Cannot read property 'something' of undefined 的错误，我们应该在组件中对 props 或者 state 设置默认值。在上面的示例中，我们应该给 MyComponent 组件设置一个默认的 message 值，例如：
-- -------------------- ---- -------
------ ------- ----- ----------- ------- --------------- -
------ ------------ - -
-------- ------- --------
--
-------- -
----- - ------- - - -----------
------ -------------------
-
-这样，在测试用例中我们不传入 message 属性时，MyComponent 组件仍然可以正常渲染。
- 在测试用例中传入正确的 props 或者 state
另外一种解决方法，是在测试用例中正确地传入 props 或者 state。在上面的示例中，我们应该这样写测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
----------- --- ------- --------- -- -- -
----- ------- - -------------------- --------------- ------- ----
------------------------------------------------- ---------
---
---这样，我们就可以避免 Cannot read property 'something' of undefined 的错误了。
总结
在使用 Enzyme 进行 React 组件测试时，我们需要注意给 props 或者 state 设置默认值，以及在测试用例中传入正确的 props 或者 state。这样可以避免出现 Cannot read property 'something' of undefined 的错误，保证测试用例的正确执行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64bf9c849e06631ab9c223af