在前端开发中，Redux 是一种非常实用的状态管理库，然而在 Redux 之中如何测试异步操作却是一个非常复杂的问题。在本文中，我们将会介绍如何使用 Enzyme 和 Jest 对 Redux 异步操作进行测试，并且通过一个完整的示例代码指导你如何进行相关的开发操作。
准备工作
在你进行 Redux 异步操作测试之前，你需要确保你已经安装并配置好了相关的开发工具。这些工具包括：
- React
- Redux
- Enzyme
- Jest
另外，在为 React 组件编写测试时，你同样需要安装 React Test Utils，这是专门针对 React 组件进行测试的一种工具库。安装方法如下：
npm install --save-dev react-addons-test-utils
测试 Redux Action
测试 Redux Action 相对较为简单，例如：
-- -------------------- ---- ------- ------ - ---------- - ---- --------------- ---------------------- -- -- - ------ ------- ---- -- -- - ------------------------------ ----- -------------- -------- ---------- --- --- ---展开代码
在 示例代码中，我们定义了一个 testAction 名称，这个名称是我们即将进行测试的异步操作。然后，在 describe 函数中，我们对 testAction 函数进行测试。expect 条件判断返回结果 toEqual 是否符合我们的预期，这里我们的结果应该是一个包含 type 和 payload 的对象。
测试 Redux Reducer
测试 Redux Reducer 相关操作与测试 Redux Action 相比较有一些复杂性。我们需要定义一个包含了一些测试用例的测试文件：
-- -------------------- ---- ------- ------ ------- ---- ------------ ------ - -- ----- ---- --------------------------- ----------------- ---- -- -- - -- -- ------- ---- -------- ------- ------- -- -- - ------------------------- -------------- ------------ ------- -------- ------ ------ ----- --- --- -- ---- ------ -------- ----------- ---- -- -- - ------- ----------- - ----- ------------------ -------- ------------ ---- -- ----------- ------------ ------------ ---- -------- ------ ------ ----- --- --- -- ---- ------ -------- -------------- ---- -- -- - ------- ----------- - ----- --------------------- -------- ----- -- ----------- -------- ----- ------------ --- ------ ----- --- --- -- ---- ------ -------- ------------ ---- -- -- - ------- ----------- - ----- ------------------- -------- ------------- ---- -- ----------- ------ ------------- ---- -------- ------ --- --- ---展开代码
在上述示例代码中，我们测试了 reducer 的初始状态和三个 Action。测试函数中，我们传入了一个状态的对象和一个 Action 类型的参数。然后，我们对返回结果进行判断。
测试 Redux Middleware
测试 Redux Middleware 是在异步请求和 Redux Store 之间的挂接。Middleware 负责将请求从外部发出，然后接受处理后的数据并将其放回 Redux Store。在这里，我们将会测试 Middleware 是否会正确处理请求。
测试 Middleware 时，我们需要首先创建一个 Mock 的 Store，然后使用 Enzyme 的 shallow 方法进行函数的渲染。例如：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------- - ---- --------- ------ ---------- ---- --------------- ------------------------------------- -------------------- ---- -- -- - -------------------------------- -- -- - ----- ----------- - ----------------- -- - ----- ----------- - --- ----- ------ - - ----- ------- -------- - -------- --- --------------- -- - ---------------------------- --- -- -- ------------------------- ------ ------------ --- ----- ---------- - --- ----- -------- - ------ -- ------------------------ ----------------------- ----- ------- --- --------------------- ------------- -- - ---------------------------- - ----- ----------------- -------- ---- -- - ----- ------------------ -------- ------------------ -- --- -- --- --- ---展开代码
在示例代码中，我们首先定义了一个 Mock 的 Middleware，并通过 shallow 方法渲染这个 Middleware。然后，我们定义了一个包含 Mock 请求的异步 Action 对象，并将这个 Action 对象传入到中间件的 dispatch 方法中。
在 assertions 中，我们判断我们所期望的处理结果的正确性。
测试 React 组件
测试 React 组件需要使用 React Test Utils，并且需要使用 Jest 进行测试。在测试 React 组件前，我们需要首先定义一个 Mock 的 Redux Store。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- - ---- -------------- ------ -------------- ---- ------------------- ------ ------------- ---- ------------------ ----- --------- - ------------------- ----- ----- - ----------- ------------ ------- -------- ------ ------ ----- --- --------------- ------ -- -- - --- -------- ---- ------------- -- - ------- - ------ --------- -------------- -------------- -- ----------- -- --- ------------ -- - ------------------ --- ---------- ------ ---- -- -- - ------------------------------------------------------ --- ---------- ------- -- -- - ----- ------------- - ----------------------- -------------------------------- -------------------------------------------------------- --- ---展开代码
在示例代码中，我们首先通过 Redux Mock Store 模拟了一个 Store。然后，我们定义了一个 Test 组件，并在 Provider 中将 Store 进行传递。在 beforeEach 中，我们使用 Enzyme 的 mount 方法进行组件的渲染。
在 it 函数中，我们定义了两个 React 组件的测试用例。首先，我们测试了组件是否包含一个 Button 的元素，然后我们测试了组件是否正确设置了 State。
结语
通过使用 Enzyme 和 Jest 对 Redux 异步操作进行测试，我们可以更加高效地进行前端开发。通过本文中所介绍的示例代码，相信大家都已经完全掌握了如何进行这方面的开发操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/679492be504e4ea9bd926a3b
