背景
React 是目前使用最广泛的前端 UI 框架之一，而 react-redux 则是在 React 中实现状态管理的重要工具。在开发 React 应用时，我们经常需要配合使用 enzyme 进行测试。enzyme 是一个 React 组件测试工具库，它提供了方便的 API，使用起来非常简洁优雅。本文将介绍如何使用 enzyme 测试 react-redux 组件。
准备工作
在开始之前，需要有一个基础的 React 和 redux 应用架构，以及已经引入了 enzyme 和 react-redux 库。如果你还不熟悉 React 和 redux，可以先阅读相关文档进行学习。
测试组件
测试 react-redux 组件时，一般是测试该组件的渲染和 redux 状态管理的正确性。下面我们以一个示例组件进行讲解。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - --------- - ---- -------------
----- ------- - -- ------ --------- -- -- -
--
----------------
------- -------------------------------
---
--
----- --------------- - ------- -- --
------ --------------
---
----- ------------------ - -
----------
--
------ ------- ------------------------ -----------------------------上面的组件实现了一个计数器功能，当点击“增加”按钮时，redux 中的计数器状态会加 1。
测试渲染
我们首先需要测试 Counter 组件的渲染，即正确地显示计数器状态和“增加”按钮。下面是测试代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------ ---- -- -- -
---------- ---- --- ------- ----- --- -------- -- -- -
----- ------- - ---------------- --------- ----
-----------------------------------------------
----------------------------------------------------
---
---需要注意的是，我们使用了 enzyme 的 shallow 方法，而不是 mount 方法。因为 shallow 只渲染了 Counter 组件本身，不渲染子组件，这样性能更高，而且更容易对组件进行测试。
测试 Redux 状态
我们还需要测试 Counter 组件正确地 dispatch 了 increment action，并且更新了 redux 的状态。下面是测试代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------ - --------- - ---- -------------
------------------ ---- -- -- -
---------- --------- ------- ---- ------ -- --------- -- -- -
----- ------------ - ----------
----- ------- - ---------------- --------- ------------------------ ----
-----------------------------------------
----------------------------------------
---
---我们首先利用 jest 提供的 fn 方法创建一个 incrementSpy 的 spy 函数，然后在渲染 Counter 组件时，将 incrementSpy 传递给组件的 increment props。接着，使用 simulate 方法模拟点击“增加”按钮，然后检查 incrementSpy 是否被调用了。
需要注意的是，我们在这个测试中只测试了 Counter 组件是否正确调用了 increment 方法，但并没有真正测试 redux 中的状态是否更新了。这是因为我们在测试 redux 状态的时候，应该将测试重心放在 reducer 函数上，而不是组件。这也是 testing-library 的方法论中所强调的。
总结
本文介绍了如何使用 enzyme 测试 react-redux 组件的渲染和 redux 状态管理的正确性，希望对你有所帮助。在实际项目中，我们需要根据实际情况进行测试，但始终要保持测试的全面性和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64d45d82b5eee0b525bed983