如何在 Enzyme 测试中获取到组件 state
在 React 前端开发中，我们通常会使用 Enzyme 这个测试工具来测试我们的组件。在测试中，我们经常需要获取组件的 state，以便验证正常情况下组件的状态是否正确。然而，在使用 Enzyme 进行测试时，有时候我们却遇到了无法获取到组件 state 的问题，导致无法完成我们的测试目的。本文将介绍如何解决这个问题，让我们可以顺利地在测试中获取到组件的 state。
问题的表现
在使用 Enzyme 进行测试时，我们通常会使用 mount 方法来将组件挂载到 DOM 中，然后使用 wrapper.state() 方法来获取组件的 state。然而，在某些情况下，我们却无法获取到组件的 state，此时 wrapper.state() 方法返回的是一个空对象。这种情况通常发生在使用 Redux 或类似状态管理库的情况下。
问题的原因
该问题的根本原因是，使用类似 Redux 的状态管理库会将组件的 state 移到了 store 中，而不再是组件自身拥有的。因此，即使我们在组件中修改了 state，但我们在测试中是无法直接获取到它的，因为它已经被存储在了 store 中。
解决方案
解决这个问题的方法非常简单明了：我们需要在测试中直接获取 store 中的 state，而不是尝试去获取组件自身的 state。对于大多数情况而言，我们可以通过如下方法获取 store：
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ -------- ---- -------------
----------------------- -- -- -
--- ------
--- --------
------------- -- -
----- - ----------------------
------- - ------
--------- --------------
------------ --
-----------
--
---
---------- ------ ---- --- ------- ------- ------- -- -- -
----- ------------ - -----------------
------------------------------
-- ----- ---------- ----
---
---
---在上述代码中，我们首先创建了一个 Redux store，并将其传递给了我们要测试的组件所在的 Provider 中。然后，在每个测试用例开始之前，我们都会重新挂载这个组件，并用 store.getState() 方法获取当前 store 中的 state。这样一来，我们就可以轻松地获取到组件的 state 了。
结论
在使用 Enzyme 进行测试时，由于类似 Redux 的状态管理库会将组件的 state 存储在 store 中，而不再是组件自身拥有的，因此我们需要在测试中直接获取 store，而不是尝试获取组件自身的 state。我们可以通过创建 Redux store 并使用 Provider 来实现这个目标。这样，我们就可以顺利地在测试中获取到组件的 state，并完成我们的测试目的。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672f4acfeedcc8a97c8dbc19