在前端开发中，React 组件的测试是非常重要的一环。而在测试过程中，我们经常会遇到需要使用 redux 的情况，比如在组件中使用了 redux 的 connect 函数等。但是，在测试中使用 redux 会带来一些不必要的复杂性，如需要 mock redux 的 store 等。本文将介绍如何在 Chai 测试 React 组件时摆脱 redux 依赖，从而简化测试流程。
使用 Enzyme
Enzyme 是一个 React 组件测试工具，它提供了一种浅渲染（shallow rendering）的方式，可以在不需要完整渲染组件的情况下进行测试。这种方式不需要依赖 redux，可以大大简化测试流程。
首先，我们需要安装 Enzyme：
npm install --save-dev enzyme enzyme-adapter-react-16
然后，我们需要配置 Enzyme 适配器：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });接下来，我们就可以使用 Enzyme 进行测试了。比如，我们可以测试一个简单的 Counter 组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - - ------ - --
-
----------- -
--------------- ------ ---------------- - - ---
-
-------- -
------ -
-----
-------------------------------
------- ----------- -- ----------------------------
------
--
-
-
------ ------- --------我们可以使用 Enzyme 的 shallow 函数来测试这个组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------- ---- ------------
------------------- -- -- -
----------- ------- -- -- -
----- ------- - ---------------- ----
--------------------------------------------------
---
-------------- ------- -- -- -
----- ------- - ---------------- ----
-----------------------------------------
--------------------------------------------------
---
---这样，我们就可以在不依赖 redux 的情况下测试 React 组件了。
总结
在测试 React 组件时，使用 Enzyme 可以帮助我们摆脱 redux 依赖，从而简化测试流程。Enzyme 提供了浅渲染的方式，可以在不需要完整渲染组件的情况下进行测试。这种方式不仅可以减少测试的复杂性，还可以提高测试的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65ceb3ddadd4f0e0ff7fb2ac