在React Native中使用Redux管理应用程序的状态是开发者的理想选择。Redux可以使应用程序状态的管理变得简单明了，同时也提高了组件之间的可复用性。当引入Redux开发者工具时，此选择变得更加有吸引力。但是，如何测试Redux开发者工具呢？在本文中，我们将介绍使用Enzyme来测试Redux开发者工具的方法。
什么是Redux开发者工具？
Redux开发者工具是一个Chrome扩展程序，它提供了一个开发者工具窗口，可以显示Redux应用程序状态。使用Redux开发者工具可以轻松地了解应用程序状态的变化，这对于调试和开发中的错误排除非常有帮助。
为什么要测试Redux开发者工具？
测试Redux开发者工具的重要性在于它保证了开发人员所管理的状态的正确性。如果开发者工具无法正确地反映应用程序状态的更改，那么我们将很难确定我们的代码是否会对应用程序状态产生意外的影响。
Enzyme是什么？
Enzyme是一个测试工具，由Airbnb开发。它是一个React测试实用程序，可以让开发者更轻松地测量渲染组件之间的交互。
Enzyme可以帮助开发者编写更易于理解和维护的测试，这些测试不会像其他测试库那样复杂。在本文中，我们将使用Enzyme来进行Redux开发者工具的测试。
使用Enzyme测试Redux开发者工具
首先，我们需要在React Native项目中添加必要的Enzyme依赖项：
npm install --save-dev enzyme enzyme-adapter-react-16
在项目的根目录下，创建一个setupTests.js文件，在文件中添加以下代码：
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
configure({ adapter: new Adapter() });此代码将Enzyme语法适配器指定为React 16。
安装依赖项
我们需要安装一些依赖项才能进行下一步测试。我们将运用npm install --save-dev redux-mock-store fetch-mock
编写测试用例
在编写有关Redux开发者工具的测试用例之前，我们需要了解 State 和 Action，并不仅仅是 Redux API。
在我们的应用程序中，包含一个确切的state(状态)，在某个时间点我们将会作出一些决定来更新这个state。在 Redux 中，我们使用一个通用标准知道 actionCreator，他们负责创建 description 一样的 action （有时也被称为“事件”），他们包含一个有准确信息的对象。这些actions被传递给一个纯函数我们称其为reducer。reducer接收一个先前的状态，和一个有关更新该状态的actions对象，以及生成一个经过更新后的新状态。
我们将定义一个Redux actions的Function并传递给我们的Redux createStore方法来创建一个维护此state的store，该方法也接受reducer函数。
我们需要在React组件中测试这个Redux store，并调用需要测试的Redux操作。我们可以使用Enzyme的shallow方法来浅渲染一个React组件并访问它的props属性。
以下是Redux开发者工具的测试用例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- ---------
------ - ---------------- ----------- - ---- --------
------ --------------- ---- --------------
------ --------- ---- -------------
------ ----------- ---- -------------
------ - ----------- - ---- ------------------
--------------- ---------- -- -- -
--- ------
------------- -- -
----- - ------------------------ ----------------------------------
---
------------ -- -
------------------
--------------------
---
----------- ----------- -- -- -
----- ------- - -------------- ------------- ----
----------------------------------
---
---------- ------- ------ ------ --------------------- -- -- -
----- -------------- - -
----- --------------------------------
------ --- -- ---
--
---------------------------- -- -----------------------------
---
---------- ------ --------------------- -- -- -
----- -------- - -
----- -
----- --- -- ---
--
--
--------------------------- ----------
----- -------------- - -
- ----- ------------------------------- --
-
----- --------------------------------
------ --- -- ---
--
--
----- ----- - ----------- ------ -- ---
------ ----------------------------
-------- -- -
---------------------------------------------------
---
---
---在上面的测试用例中，我们：
- 首先创建了一个Redux Store，以便我们可以测试Reducers的操作。
- 之后我们按照测试，浅渲染一个React组件并访问它的Props属性。
- 随后我们检查了我们的Action Creator是否能够创建正确的Action。
- 最后，我们编写一个可以测试异步操作的测试用例，并通过使用 fetch-mock 渲染返回数据，并检查store action是否等于期望行动。
结论
在本文中，我们了解了Redux开发者工具的简介以及其在React Native开发中的重要性。我们还学习了如何使用Enzyme测试Redux开发者工具，以确保我们管理的应用程序状态的正确性。这会帮助您在应用程序开发中排除任何可能的错误，并确保应用程序的可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67519b028bd460d3ad8b1caf