在 React 应用中，Redux 是一个非常流行的状态管理库。然而，测试 Redux 操作并不是一件容易的事情。在本文中，我们将会介绍如何使用 Jest 和 Enzyme 在 React 应用程序中模拟 Redux 操作，以便于我们进行更好的测试。
什么是 Jest 和 Enzyme？
Jest 是一个由 Facebook 开发的 JavaScript 测试框架。它是一个非常流行的测试工具，用于编写单元测试、集成测试和端到端测试。Jest 具有易于使用的 API 和强大的功能，例如快照测试、mock 和 spy 等。
Enzyme 是一个由 Airbnb 开发的 React 测试工具。它提供了一系列实用的 API，用于渲染 React 组件、模拟用户交互和测试组件的行为。Enzyme 与 Jest 结合使用可以使我们更轻松地测试 React 应用程序。
如何模拟 Redux 操作？
在使用 Redux 的 React 应用程序中，我们通常会编写一些 action、reducer 和 selector。这些函数通常会处理应用程序中的状态，并在应用程序中触发更新。为了测试这些函数，我们需要模拟 Redux store 和 dispatch 函数。
模拟 Redux store
我们可以使用 redux-mock-store 库来模拟 Redux store。它提供了一个 mockStore 函数，可以创建一个模拟的 Redux store，用于在测试中使用。
------ ------------------ ---- ------------------- ----- --------- - --------------------- ----- ----- - --------------
在上面的代码中，我们使用 configureMockStore 函数创建了一个 mockStore。然后，我们使用这个 mockStore 创建了一个空的 Redux store。现在，我们可以在测试中使用 store 对象来模拟 Redux store。
模拟 dispatch 函数
在 Redux 应用程序中，我们通常会使用 dispatch 函数来触发 action。为了测试这些 action，我们需要模拟 dispatch 函数。我们可以使用 jest.fn() 函数来创建一个模拟的 dispatch 函数。
----- -------- - ----------
在上面的代码中，我们使用 jest.fn() 函数创建了一个模拟的 dispatch 函数。现在，我们可以在测试中使用 dispatch 函数来模拟 action 的触发。
示例代码
下面是一个使用 Jest 和 Enzyme 在 React 应用程序中模拟 Redux 操作的示例代码：
------ ----- ---- --------
------ - ------- - ---- ---------
------ ------------------ ---- -------------------
------ ----- ---- --------------
------ - -------- - ---- --------------
------ - --------- - ---- ------------
------ --- ---- --------
----- --------- - ----------------------------
--------------- -- -- -
--- ------
--- --------
------------- -- -
----- - -----------
----- ---
---------- ------
------ -----
---
-------------- - ----------
------- - --------
--------- --------------
---- --
------------
--
---
---------- -------- --------- -------- -- -- -
----- -------------- - ------------
------------------------------------------------------------
---
---------- ------ ---- ----------- -- -- -
----- ---- - -- --- -- ----- ------ -- - --- -- ----- ------ ---
----- - -----------
-----
---------- ------
------ -----
---
------- - --------
--------- --------------
---- --
------------
--
-----------------------------------------------------
--------------------------------------------------------
--------------------------------------------------------
---
---在上面的代码中，我们编写了一个测试套件，用于测试 App 组件。我们首先使用 configureMockStore 函数创建了一个模拟的 Redux store，并使用 jest.fn() 函数创建了一个模拟的 dispatch 函数。
在 beforeEach 函数中，我们使用 shallow 函数渲染了 App 组件，并将模拟的 Redux store 传递给 Provider 组件。然后，我们可以在测试中使用 dispatch 函数来模拟 action 的触发。
在第一个测试中，我们测试了 fetchData action 是否被正确地触发。在第二个测试中，我们测试了组件是否正确地渲染了数据。
总结
在本文中，我们介绍了如何使用 Jest 和 Enzyme 在 React 应用程序中模拟 Redux 操作。我们使用了 redux-mock-store 库来模拟 Redux store，并使用 jest.fn() 函数来模拟 dispatch 函数。这些技术可以帮助我们更好地测试 Redux 应用程序，并确保应用程序的正确性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65e05e651886fbafa4d9482a