如果你在使用 Enzyme 来进行 React 组件测试的时候，遇到过 TypeError: Cannot read property 'xxx' of null 这个错误的话，那么很有可能是因为组件内部某个节点的 props 或者 state 被设置成了 null。这篇文章将会介绍在测试过程中如何诊断和解决这个问题。
原因分析
在使用 Enzyme 进行渲染测试时，我们会使用 shallow() 方法来渲染一个组件。这个方法会将组件内部的所有子组件都进行渲染，但是会将这些子组件当成“黑盒子”，不进行深层次的渲染。这也就是说，如果某个子组件的 props 或者 state 被设置成了 null，那么在测试这个组件的时候，测试代码就会报出 TypeError: Cannot read property 'xxx' of null 的错误。
举一个例子来说明。假设我们有如下的一个 React 组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
----- ----
--
-
------------------- -
---------------
----- -
---- ---
---- ------ -------
-
---
-
-------- -
----- - ---- - - -----------
------ -
-----
-----------------
-----------------------
------
--
-
-
------ ------- ------------这个组件会通过 componentDidMount() 方法来设置 this.state.data，但是在组件初次渲染时，this.state.data 的值是 null。如果我们对这个组件进行浅渲染（即使用 shallow() 方法进行渲染），那么在测试过程中就会出现 TypeError: Cannot read property 'str' of null 的错误。这是因为在渲染组件时，子组件的 props 或者 state 被设置成了 null，而我们在组件的 render() 方法中却尝试去访问了这些 props 或者 state 中的对象属性。
解决方法
针对上述的问题，我们有几种解决方法。
方法一：添加默认值
我们可以在组件的 render() 方法中为访问到的属性设置默认值，从而避免因为 null 值而导致的测试失败。修改上述组件代码如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
----- ----
--
-
------------------- -
---------------
----- -
---- ---
---- ------ -------
-
---
-
-------- -
----- - ---- - - -----------
----- ------- - ---- - -------- - ----------
----- ------- - ---- - -------- - ---
------ -
-----
----------------
----------------------
------
--
-
-
------ ------- ------------方法二：深渲染组件
在某些情况下，我们需要对组件进行深渲染，以便在测试过程中访问到子组件的 props 或者 state。这时候，我们可以使用 mount() 方法来代替 shallow() 方法进行组件渲染。例如，我们可以重写上述组件的测试代码如下所示：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ ----------- -- -- -
----- ------- - ------------------ ----
----------------------------------------------- ---------
--------------------------------------------------
------------------
---
---需要注意的是，在使用 mount() 方法进行组件渲染时，我们需要在测试代码结束后手动将组件卸载掉，以便避免在内存中产生过多的无用组件。
总结
在进行 React 组件测试时，如果遇到了 TypeError: Cannot read property 'xxx' of null 这个错误，那么很有可能是因为组件内部某个节点的 props 或者 state 被设置成了 null。为了避免这个问题，我们可以使用上述两种方法进行解决：为访问到的 props 或者 state 设置默认值，或者使用 mount() 方法进行深渲染。到这里，我们就学习了如何处理 Enzyme 测试中的 TypeError: Cannot read property 'xxx' of null 错误，希望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469d808968c7c53b09a4d2d