React 和 Redux 是现代前端开发中常用的两个技术,它们可以极大地提高开发效率和应用程序的可维护性。但是同时使用它们构建的组件的测试也是不可避免的,因为在代码随着开发的进行不断变化的情况下,保证组件的正确性是至关重要的。本文将介绍如何在 Enzyme 中测试 React 中使用 Redux 的组件。
Enzyme 简介
Enzyme 是 Airbnb 开源的用于测试 React 组件的 JavaScript 工具库。它提供了很多 API,可用于方便地创建和操作 React 组件,以简单而直观的方式编写测试。
测试 Redux 应用程序的组件
Redux 是一个预测性的状态管理库,它使开发人员能够更加可靠地维护应用程序状态。在测试 Redux 组件时,需要模拟应用程序状态的变化。
首先,我们需要使用 Enzyme 中的 mount
方法将组件挂载到 DOM 上,然后创建一个 Redux store 对象,并将它作为 prop 传递给组件。
------ ----- ---- -------- ------ - -------- - ---- -------------- ------ - ----- - ---- --------- ------ -------------- ---- ------------------- ------ ----------- ---- ---------------- ----------------------- -- -- - ----- --------- - ------------------- --- ------ ------------- -- - ----- - ----------- -- ------ --- --- ---------- ------ ----------- -- -- - ----- ------- - ------ --------- -------------- ------------ -- ------------ -- ---------------------------------- --- ---
然后可以使用 Enzyme 的 simulate
方法模拟组件中传入的事件,以测试组件中 Redux action 和 reducer 的正确性。
---------- -------- -- ------ -- ------ ------- -- -- - ----- ------- - ------ --------- -------------- ------------ -- ------------ -- ----- ------ - --------------------------- ------------------------- ----- ------- - ------------------- -------------------------- ----- ------------- ---- ---
上述测试将在按钮点击时检查是否触发了一个名为 SOME_ACTION
的 Redux action。
测试 Redux 内部的组件
在测试 Redux 内部的组件时,需要 Mock React 组件的 connect
方法来使其脱离 Redux store,这样可以更方便地编写测试代码。
下面演示了如何使用 react-redux
提供的 mockStore
方法模拟 Redux store。
------ ----- ---- -------- ------ - ----- - ---- --------- ------ -------------- ---- ------------------- ------ - -------- - ---- -------------- ------ - ----------- - ---- ---------------- ----------------------- -- -- - ----- --------- - ------------------- --- ------ ------------- -- - ----- - ----------- -- ------ --- --- ---------- ------ ----------- -- -- - ----- ------- - ------ --------- -------------- ------------ -- ------------ -- ---------------------------------- --- ---------- ------ ------ ----- ----------- -- -- - ----- ----- - - --------- ---------- -- ----- ------- - ------------------ ---------- ---- ----- ------ - --------------------------- ------------------------- --------------------------------------------- ----- -------------- --- --- ---
使用这种方法,我们可以更容易地测试 Redux 组件,并分离 Redux store 中的组件逻辑,以便更好地进行单元测试。
结论
本文介绍了如何使用 Enzyme 的 API 测试 React 中使用 Redux 的组件,包括如何在组件中模拟 Redux store 和在 Enzyme 中 Mock React 组件的 connect
方法。
如何在 Enzyme 中测试 React 中使用 Redux 的组件?我们已经告诉你,希望本文可以帮助你更好地理解如何测试 React 中的 Redux 应用程序组件。在实践中,我们还需要适当地选择测试和 Mock Redux 应用程序中的各个部分。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/671f52da2e7021665efd0279