当我们在使用 Enzyme 对 React 组件进行测试时，可能会遇到 “Cannot read property 'map' of undefined” 的错误。这个错误通常是由于组件在渲染时，使用了一个未初始化的数组导致的。下面我们来看看如何解决这个问题。
问题原因
当我们使用 mount 或 shallow 方法测试 React 组件时，Enzyme 会渲染整个组件树。在渲染前，如果组件中某个数据结构（如数组）没有被初始化，那么在渲染时可能会导致 map 方法无法正确地运行，从而报错“Cannot read property 'map' of undefined”。
例如，下面这个组件未初始化 data，在进行测试时就会出现上述的错误：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------- -
------ -
----
------------------------- -- -
--- ------------------------------
---
-----
--
-
-
-- ----
----------- ------- ---------- -- -- -
----- ------- - ------------------ ----
----------------------------------
---解决方法
为避免上述错误，我们需要在组件被渲染之前初始化组件中的数据结构。初始化数据结构的方法可以根据具体场景选择，例如：
- 在组件的构造函数中初始化：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
----- --
--
-
-------- -
------ -
----
------------------------- -- -
--- ------------------------------
---
-----
--
-
-
-- ----
----------- ------- ---------- -- -- -
----- ------- - ------------------ ----
----------------------------------
---- 通过
getDefaultProps()方法初始化：
-- -------------------- ---- -------
----- ----------- ------- --------------- -
------ ------------ - -
----- --
--
-------- -
------ -
----
------------------------- -- -
--- ------------------------------
---
-----
--
-
-
-- ----
----------- ------- ---------- -- -- -
----- ------- - ------------------ ----
----------------------------------
---- 在父组件中传递 props 初始化：
-- -------------------- ---- -------
----- --------------- ------- --------------- -
------------------ -
-------------
---------- - -
----- --
--
-
-------- -
------ ------------ ---------------------- ---
-
-
----- ----------- ------- --------------- -
-------- -
------ -
----
------------------------- -- -
--- ------------------------------
---
-----
--
-
-
----------- ------- ---------- -- -- -
----- ------- - ---------------------- ----
----------------------------------
---总结
在使用 Enzyme 进行 React 组件测试时，当组件中的某个数据结构未被初始化时，可能会出现“Cannot read property 'map' of undefined”错误。我们可以在组件的构造函数或 getDefaultProps() 方法中或通过父组件传递 props 等方法来初始化数据结构，以解决这个问题。上述方法不仅适用于 map() 方法，也适用于其它类似的迭代方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e5a2baf6b2d6eab3112b63