概述
在 React 应用程序开发中，Redux 是一种常用的状态管理库。Redux 通过中心存储器和单向数据流的模式来管理应用程序的状态。但是，由于 Redux 的行为是异步的，因此测试其内容会直接面临很大的挑战。在这种情况下，Enzyme 库就成为了解决方案之一。Enzyme 是一个用于编写 React 组建测试的 JavaScript 库，由 Airbnb 内部开发并维护。本文将介绍如何使用 Enzyme 测试 Redux 中的异步操作。
Enzyme 简介
Enzyme 是一个用于测试 React 组件的 JavaScript 库。Enzyme 提供了一些实用工具，可以易于编写测试代码来检验组件的状态、属性以及 DOM 渲染结果等各个方面。详细文档请参考 Enzyme 官方文档。
Redux 中的异步行为
Redux 中的异步操作是通过 Redux Thunk、Redux Saga 或 Redux Observable 等中间件实现的。以下是一个 Redux Thunk 内部处理异步操作的示例：
-- -------------------- ---- -------
------ -------- ------------ -
------ ----- ---------- -- -
------------------------------
--- -
----- ----- - ----- ----------------
-----------------------------------
- ----- ------- -
-----------------------------------
-
--
-上述代码通过异步函数获取数据，在获取数据之前调用了 dispatch(fetchPostsRequest()) 来发出请求。在得到数据后，将数据通过 dispatch(fetchPostsSuccess(posts)) 的形式通知操作完成，或者在失败时通过 dispatch(fetchPostsFailure(error)) 发送错误信息。所有这些都是异步操作，因此在测试中不能直接访问状态的变化。 此时，我们需要 Enzyme 来协助我们完成测试。
使用 Enzyme 测试 Redux 中的异步行为
首先，我们需要安装 enzyme、enzyme-adapter-react-16 和 redux-mock-store 库， 安装命令如下：
npm install --save-dev enzyme enzyme-adapter-react-16 redux-mock-store
然后，在测试文件中引入这些库并配置 Enzyme：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ---------- ----- - ---- --------- ------ ------- ---- -------------------------- ------ ------------------ ---- ------------------- ------ ----- ---- -------------- ----------- -------- --- --------- --- ----- ----------- - -------- ----- --------- - --------------------------------
这段代码导入了用于编写测试代码的所有实用工具，并使用 configure 方法配置 Enzyme。接下来，我们定义一个 mock store，可以对正在测试的组件进行存储：
const store = mockStore({
posts: {},
isFetching: false,
error: null,
});mock store 是针对我们测试的组件提供的一个假存储。这个存储可以模拟我们测试的组件的状态，并通过 dispatcher发送和监视 redux actions。 接下来，我们可以使用方法 mount 渲染组件并将 mock store 传递给组件：
const wrapper = mount(<PostList store={store} />);PostList 组件的代码如下：
-- -------------------- ---- -------
----- -------- ------- --------------- -
------------------- -
------------------------
-
-------- -
----- - ------ ----------- ----- - - -----------
-- ------------ -
------ --------------------
-
-- ------- -
------ ----------- ----------------------
-
------ -
----
--------------- -- -
--- -------------------------------
---
-----
--
-
-PostList 组件在其 componentDidMount 方法中调用了 fetchPosts 方法来获取远程数据。我们将基于这个组件进行测试。
这时就可以写测试用例了。下面是一个简单的测试示例：
it('should fetch data from API', () => {
return store.dispatch(fetchPosts()).then(() => {
expect(store.getActions()).toMatchSnapshot();
});
});在这个例子中，我们使用 store.dispatch 方法调用 fetchPosts 方法，通过 Promise 对象返回相应的结果。在异步操作完成后，store.getActions 方法会返回所有的 Redux action 数组。最后，我们可以对返回的结果快照匹配。如果测试成功，我们将能够透过 Enzyme 和 Redux mock store 深入了解应用程序运行的每个细节。
总结
在 Redux 应用程序中使用异步行为时，我们需要使用测试工具来验证代码能否正确地执行异步操作。Enzyme 是一个很好的测试工具，它可以简化逻辑测试代码的编写过程。当我们想测试 Redux 中的异步行为时，我们可以借助 Enzyme 和 redux-mock-store 模块来模拟并监视异步操作。在编写测试时，我们可以尽可能地模拟多种情况，以确保代码正确并且可靠。这样的测试方法将有助于保证代码的质量和健壮性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f74c4968c7c53b0dcf7f2