在前端开发过程中，React和Redux是必不可少的工具。为了测试React组件，可以使用Enzyme，Enzyme提供了一些方法可以用来测试React组件中的函数、props、state等。但是，如何测试Redux相关的组件呢？在本文中，我们将介绍如何在Enzyme中模拟Redux的Provider和connect()，以便更好地测试Redux相关的组件。
了解Provider和connect()
在开始介绍如何在Enzyme中模拟Provider和connect()之前，需要先了解Provider和connect()的概念。
Provider是Redux库的一个组件，它将整个Redux store传递给React应用的所有组件。通过Provider，你可以在所有的组件中访问Redux store，并且你的Redux store会被订阅到所有的组件中。Provider会自动响应Redux store的变化并更新组件的状态。
connect()是Redux库提供的另一个组件，它将React组件与Redux store连接起来。通过connect()，你可以将Redux store中的值传递到React组件中，并且你的React组件会自动更新Redux store。
如何模拟Provider和connect()
现在我们已经掌握了Provider和connect()的概念，接下来就是模拟它们。在模拟Provider和connect()之前，我们需要先安装一些必要的包：
--- ------- ---------- ----- ----------- ------ -----------------------
然后，在你的测试文件中，你需要引入一些包：
------ - -------- - ---- -------------- ------ - -------- --------- - ---- --------- ------ ------- ---- -------------------------- ------ - ----------- - ---- -------- ------ ----------- ---- --------------
首先，我们需要创建一个Redux store，并将它传递给Provider组件。我们可以使用createStore方法从rootReducer创建一个Redux store，并使用Provider将它传递到我们的React组件中。
----------- -------- --- --------- ---
---------------------- ---- -- -- -
----- ----- - -------------------------
----- ------- - --------
--------- --------------
------------ --
-----------
--
----------- ------------- -- -- -
--------------------------------------------------
---
---但是，即使我们已经成功地将Redux store传递给React组件，它还是不能访问Redux store。因此，我们需要使用connect()方法将Redux store连接到我们的React组件中。
为了在测试中使用connect()方法，我们需要外包一层高阶组件，这样我们就可以通过shallow()方法获取我们的React组件。
----- --------------- - ----- -- --
-------- --------------
---
----- ------------------ - --------------------------------------
----- ------- - --------
--------- --------------
------------------- --
-----------
--现在，我们已经成功地将Redux store连接到我们的React组件中。我们可以通过查找wrapped组件以及常用的方法和props来测试我们的React组件。
----------- ----------- ---- ----- ---- ----- ------- -- -- - -------------------------------------------------- ------------------------------------------------------------------------------------ ---
总结
在本文中，我们介绍了如何在Enzyme中模拟Redux的Provider和connect()。通过使用Provider和connect()，我们可以更好地测试Redux相关的组件。掌握了这些技能后，你可以更加自信地编写React和Redux应用，以及进行更全面的测试。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6481527c48841e98940c9550