Enzyme + React Native：如何使用 Mock 实现 redux-thunk 的测试
React Native 是一个流行的跨平台移动应用程序的开发框架，使用 React Native 开发是高效的，但是如何测试是一个问题。在 React Native 应用程序中，redux-thunk 是一个流行的中间件，可以使创建副作用程序变得更加容易。对于 Redux 流程中所有异步操作，iddleware 确保应用始终处于一致状态。但是，集成测试 redux-thunk 可能会变得非常困难，因为在测试异步操作时，需要模拟所有 API 响应。
引入 Enzyme 和 Mock 有助于解决该问题，本文将解释如何使用 Enzyme 进行基于组件的测试，并使用 Mock 来模拟数据来测试 redux-thunk 中的异步操作。
一、为什么需要测试 redux-thunk
redux-thunk 是一个允许你编写处理异步逻辑的 Action Creator 的中间件。通常，我们使用它来在 Redux 应用程序中处理数据获取和提交等异步过程。当我们查询 API 以获取数据或在前端应用程序中进行反向验证时，redux-thunk 的测试变得非常重要但也非常困难。
Redux-thunk 的 Action Creator 可能包括多个 Action，如 Request、Success 和 Failure。您可能还会在 Action Creator 中编写代码以更新应用程序中的存储状态。这使得测试 redux-thunk 变得更加必要，因为您需要查看 Redux 状态的变化，以确保正确性。
二、使用 Enzyme 进行基于组件的测试
在使用 Enzyme 进行基于组件的测试时，我们使用遵循 BFF 原则的表示层、功能层和数据层范例来进行测试。以下是使用 Enzyme 进行基于组件的测试的步骤：
- 将测试的组件和 redux store 传递给测试用例：
在这个例子中， HomeComponent 依赖于 store 来获取数据并将其呈现到屏幕上。在此处，我们使用 store 将 store 与组件 HomeComponent 一起传递到测试文件。
-------------- ----------- ---- -
----- --------- - -----------------
--- ------
--- --------
----------------
----- ------------ - ---
----- - ------------------------
------- - ---------------------- -----------------
---在此处，我们模拟存储并将其传递给组件 HomeComponent。我们还将组件用 shallow 方法浅渲染，用于测试该组件是否可以正常执行。
- 测试组件是否因存储而渲染正确：
现在，我们已经将组件和存储传递给了测试用例，并且需要对渲染的结果进行判断。我们需要检查是否返回预期的 UI。
---------- ------ ------- -------- -- ------- -- -- - ---------------------------------- --- ---------- ------ ------ -- -- - ---------------------------------------- -------- ---
在此处，我们检查组件是否返回预期的 UI。我们使用 expect 和 toContain 方法检查组件是否呈现 Hello, World。
三、使用 Jest Mocks 模拟 API 响应
在测试环境中，我们需要使用独立于外部请求的数据来测试，在这种情况下，我们需要使用 Jest Mock 实现数据模拟。
使用 Mock 的好处是我们可以在测试中更改实际 API 的响应性。这允许我们更好地控制测试流程，以便更好地测试我们的代码。
- 取消回调并解决冲突
回调是考虑从模拟 API 响应中删除的另一个方面，因为 mock API 不会像实际 API 一样返回回调。如果您的网络请求使用回调，则需要将其修改为 Promise ，以便可以使用 Jest Mock。
-- ------ - --- ------- ---- - ------- --------
------ ----- ---------- - -- -- ---------- -- -
------ --------------------------------
---------------- -- -
----------------------------------
--
-------------- -- -
---------------------
---
--- 使用 Jest Mock 模拟 API
在此示例中，我们将使用 axios- mock-adapter 来模拟我们的后端 API。这是一个好的 mock 类库，我们可以在其中创建 axios 对象以及使用来自 API 的数据。我们将假设 api 返回以下数据：
- -------- -- ---------- --------- ----- ------------ -
我们可以使用如下方式进行 Mock 测试：
--------------- --------- -- -- -
--- ------
------------- -- -
----- --------- - ----------------------------
----- - --------------
---
------------ -- -
------------------
--------------------
---
----------- -------------------- ---- -------- ------ --- ---- ------ -- -- -
-------------------------------- -
------ --
-------- -- ----- ----- ---------- --
---
----- --------------- - -
- ----- -------------------------- --
- ----- --------------------------- -------- - ------ -- -------- -- ----- ----- ---------- -- - -
--
------ --------------------------------------------- -- -
----------------------------------------------------
---
---
---在代码中使用了 axios-mock-adapter 模拟了 get 请求并返回我们需要的响应数据。通过 then 方法我们可以看到 store 期望的 action 序列是否正确。
使用 Jest Mocks 模拟 API 响应是一个极好的方式，因为它允许我们控制数据并更好地测试我们的代码，而不受外部 API 响应性的影响。
总结
Enzyme 和 Jest Mocks 可以帮助 React Native 开发人员更好地测试他们的代码。在本文中，我们重点介绍了如何使用 Enzyme 进行基于组件的测试，以及如何使用 Jest Mocks 模拟 API 响应。
测试 redux-thunk 可能会变得非常困难，但集成 Enzyme 和 Mock 可以使这个过程变得容易。现在您已经学会了如何使用这些工具来测试您的代码，希望您能将这些技术运用在实际开发中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/648329ad48841e989429fa88