在前端开发中，通过 redux-saga 可以使异步 action 更加简单和可控。但是在进行相关单元测试的时候，如何在 Enzyme 中模拟 redux-saga 的异步 action 就成为了一个棘手的问题。本篇文章将详细讲解如何在 Enzyme 中模拟 redux-saga 的异步 action，帮助读者更好地进行单元测试。
简介
在 redux-saga 中，异步 action 通常使用 Saga 来实现。一个简单的 Saga 示例如下：
function* loadUser() {
try {
const user = yield call(fetchUserApi);
yield put({ type: 'LOAD_USER_SUCCESS', user });
} catch (error) {
yield put({ type: 'LOAD_USER_FAILURE', error });
}
}在上述代码中，fetchUserApi 是一个异步 API，yield call(fetchUserApi) 用于调用异步 API，并等待返回结果。如果返回结果成功，就通过 yield put({ type: 'LOAD_USER_SUCCESS', user }) 发送一个成功的 action。如果返回结果失败，就通过 yield put({ type: 'LOAD_USER_FAILURE', error }) 发送一个失败的 action。
在测试 loadUser Saga 的时候，我们需要模拟异步 API 的返回结果，这就需要使用 Enzyme 中的一些方法来进行测试。
使用 Enzyme 模拟异步 action
1. 安装必要的库
首先，我们需要安装一些必要的库。我们需要安装 enzyme，enzyme-adapter-react-16 和 redux-saga-test-plan：
npm install --save-dev enzyme enzyme-adapter-react-16 redux-saga-test-plan
2. 配置 Enzyme
接着，我们需要配置 Enzyme 来支持 React 16：
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({
adapter: new Adapter(),
});3. 测试 Saga
下面，让我们来测试上述的 loadUser Saga：
-- -------------------- ---- -------
------ - ----- --- - ---- ---------------------
------ - ---------- - ---- -----------------------
-- -- ---
-------- -------------- -
------ --- ----------------- ------- -- -
------------- -- -
--------- ----- ------ ---- -- ---
-- ------
---
-
--------- ---------- -
--- -
----- ---- - ----- -------------------
----- ----- ----- -------------------- ---- ---
- ----- ------- -
----- ----- ----- -------------------- ----- ---
-
-
------------------ ------ -- -- -
---------- ---- ---- ---- --------- -- -- -
------ --------------------
------------------------------ - ----- ------ ---- -- ----
------
----- --------------------
----- - ----- ------ ---- -- --
--
-------
---
---------- ---- ---- ---- --------- -- -- -
------ --------------------
------------------------------ ------------------ -----------
------ ----- ------------------- --
-------
---
---在上述代码中，我们使用了 redux-saga-test-plan 库来模拟异步 API 的返回结果。我们通过 provide 方法来设置返回结果，如果是成功的情况，就通过 put 方法来检查是否发送了成功的 action，如果是失败的情况，就通过 put 方法来检查是否发送了失败的 action。
总结
通过本文的讲解，我们了解了如何在 Enzyme 中模拟 redux-saga 的异步 action。在进行单元测试的时候，我们可以使用 redux-saga-test-plan 库来模拟异步 action 的返回结果，以此来测试我们的 Saga 代码。这样可以帮助我们更好地掌握如何进行单元测试，以提高代码的质量和稳定性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6481ab2248841e989412769a