解决 Enzyme 测试中出现的 “wrapper.state() is not a function” 错误提示
在进行前端自动化测试时，Enzyme 是一个常用的工具库之一。使用 Enzyme 进行测试时，有时会遇到“wrapper.state() is not a function” 错误提示，这篇文章将为大家提供解决方案。
问题背景
当我们使用 Enzyme 进行 React 组件测试时，有时需要获取组件的 state 数据，用法如下：
------ - ------- - ---- --------- ------ ----- ---- -------- ------ ----------- ---- --------------- ---------- ------ --- --------- ---- ------- ------- -- -- - ----- ------- - -------------------- ---- ---------------------------------------------------- ---
然而在有些情况下，却会出现如下错误：
---------- ------------- -- --- - --------
这是因为我们在 Enzyme 的 ReactWrapper 上使用了 state 方法，而它并没有定义 state 方法，而只有 shallow 和 mount 这两个方法才有 state 方法。
解决方案
1. 使用 shallow 方法获取 state
我们可以使用 shallow 方法获取组件的 state，如下所示：
------ - ------- - ---- --------- ------ ----- ---- -------- ------ ----------- ---- --------------- ---------- ------ --- --------- ---- ------- ------- -- -- - ----- ------- - -------------------- ---- ---------------------------------------------------- ---
2. 使用 instance 方法获取 state
我们也可以使用 instance 方法获取组件实例，并在实例上调用 state 方法，如下所示：
------ - ----- - ---- --------- ------ ----- ---- -------- ------ ----------- ---- --------------- ---------- ------ --- --------- ---- ------- ------- -- -- - ----- ------- - ------------------ ---- ----- -------- - ------------------- -------------------------------------------------- ---
3. 使用 state 方法前确认 wrapper 存在
当 Enzyme 的 ReactWrapper 未被定义时，我们也需要先判断其是否存在，然后再使用 state 方法，如下所示：
------ - ------- - ---- ---------
------ ----- ---- --------
------ ----------- ---- ---------------
---------- ------ --- --------- ---- ------- ------- -- -- -
----- ------- - -------------------- ----
-------------------- -
----------------------------------------------------
-
---总结
当出现“wrapper.state() is not a function” 错误提示时，我们可以使用 shallow 方法、instance 方法或先确保 wrapper 存在这三种方式来获取组件的 state。这一点在 Enzyme 测试中非常重要，在使用中需要特别注意。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6651af24d3423812e45d6e76