在前端开发中，React 和 Redux 已经成为了很流行的库。但是，它们的单元测试始终是一件比较麻烦的事情。enzyme-redux 是一个非常好的 npm 包，它可以帮助我们更加方便地在 React 和 Redux 中进行单元测试。
安装
使用 npm 指令进行安装：
npm install --save-dev enzyme enzyme-adapter-react-16 enzyme-redux
安装完成后，根据你的项目需要添加 enzyme 和 enzyme-redux 依赖。
配置
在使用 enzyme-redux 进行测试之前，我们需要进行一些配置。
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- ---------
------ ------- ---- --------------------------
------ - ----- - ---- ---------
------ - -------- - ---- --------------
------ -------------- ---- -------------------
------ ----------- ---- ---------------
-- --- ------ ---
----------- -------- --- --------- ---
-- -- ----- ------- ---------------- -------
----- --------- - -------------------
----- ------------- - -------- -- -
-------------
--
----- ----- - -- -- -
-- ---- -----
----- ----- - -
----- ------ -------
--
-- -- ----- -----
----- ----- - -----------
----- -------
---
----- ------------------ - -
--------- --------------
-------------
-------------- ---------- --
--------------
-----------
--
------ - ------ ------ -------- ------------------------- --
--
------------------------- -- -- -
----------- ---- ----------- -- -- -
----- - ------- - - --------
----------------------------------------------- --------
---
---在这个示例代码中，我们演示了如何对一个 React 组件（TestComponent）进行单元测试。我们还展示了如何使用 enzyme-redux 来帮助我们更方便地测试 Redux 相关的功能。
我们在 setup 函数中初始化了模拟组件的 props 和模拟的 Redux store。然后，我们使用了 Provider 和 EnzymeRedux 来集成我们的组件和 store。最后，我们挂载我们的组件到 DOM 并进行测试。
API
<EnzymeRedux>
一个 higher-order 组件，用于将 React 组件连接到 Redux store。
<EnzymeRedux store={store} dispatch={dispatch} path="path.to.props" />Props
store(Redux store): store 对象，会传递给子组件。path(string): store 上的一个 key 或者是一个路径，表示哪个部分需要组件化。dispatch(function): 一个 dispatch 函数，用于将 actions 分发到 Store，将会传递给子组件。mapStateToProps(function): 需要 state 的部分映射到组件的 props，这个函数接受一个 state 参数并返回一个对象，用于描述需要传递到子组件的 props。mapDispatchToProps(object | function): 需要 action 的部分映射成组件的 props，这个函数接受 dispatch 函数并返回一个对象，用于描述需要传递到子组件的 props。
注意：path、mapStateToProps和mapDispatchToProps 是可选的，取决于你的项目需要。
<DispatchAction>
一个 React 组件，用于向 store 分发 actions。
<DispatchAction store={store} action={action} />Props
store(Redux store): store 对象。action(function): 分发到 store 的 action。
总结
总而言之，enzyme-redux 提供了方便的 API，可以帮助我们更轻松地进行单元测试。如果你的项目使用 React 和 Redux，并且想要快速有效地测试它们，那么你一定要试试这个 npm 包。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e26a563576b7b1ecff1