Enzyme 测试组件中遇到 “wrapper.state() is undefined” 错误的解决方法
在 React 前端开发中，我们经常需要使用 Enzyme 这个测试工具来测试我们的组件。但是有时候在测试的过程中，我们会遇到 “wrapper.state() is undefined” 这个错误，这个错误的出现让我们的测试无法进行下去。那么这个错误怎么解决呢？本文将为你提供解决方法。
一、错误的原因
在 Enzyme 中，我们常常使用 wrapper.state() 来获取组件的 state。但是有时候我们会遇到这样的情况，调用 wrapper.state() 的时候会出现 “wrapper.state() is undefined” 的错误，这是因为 wrapper 没有包含一个 React 组件。简单来说，就是我们没有正确地传入一个组件以供真正渲染。
二、解决方法
要解决这个问题，我们需要两个步骤：
- 确认测试文件的组件引入是否正确。
在测试文件中，我们需要确认我们是否正确地引入了待测试的组件。
示例代码：
import MyComponent from './MyComponent';
如果这里的 MyComponent 引入有误，就会导致 wrapper 无法正确地获取组件的状态。
- 确认
mount()或shallow()的参数是否正确。
在使用 Enzyme 渲染组件的时候，我们需要使用 mount() 或 shallow() 方法，但是这两个方法都需要传入一个参数 —— 待渲染的组件。
示例代码：
import MyComponent from './MyComponent'; const wrapper = mount(<MyComponent />);
如果这里的组件引入有误或者没有正确地传入组件，就会导致 wrapper 无法正确地获取组件的状态。
三、实战案例
在实际开发中，错误总是难以避免。下面是一个简单的实战案例，演示了 Enzyme 中 “wrapper.state() is undefined” 错误的解决方法。
组件源代码（MyComponent.js）：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
------------------ -
-------------
---------- - -
----- -----
--
-
-------- -
------ -
-----
--------- ---------------------
------
--
-
-
------ ------- ------------测试代码（MyComponent.test.js）：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------
------ ----------- ---- ----------------
----------------------- -- -- -
---------- ------ --- ------- ------ -- -- -
----- ------- - ------------------ ----
----- ---- - ----------------------
----------------------------
---
---在这个测试用例中，我们测试了组件的状态是否正确。如果测试通过，我们期望能够得到 “Tom” 这个字符串。
但是，当我们运行测试用例的时候，却发现测试失败了。错误信息是 “wrapper.state() is undefined” 。
观察一下我们的测试代码，发现我们没有在测试文件中正确引入组件类。我们应该添加下面这行代码：
import MyComponent from './MyComponent';
加上这行代码后，我们再次运行测试用例，测试顺利通过了。
四、总结
在本文中，我们讲解了 Enzyme 中 “wrapper.state() is undefined” 错误的解决方法。在实际开发中，错误总是难以避免，通过这篇文章的学习，我们可以更好地理解 Enzyme 和 React 组件的关系，并且能够更加准确地定位问题、解决问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6518c9c495b1f8cacd1115d6