深入理解与测试Redux-Saga中的all Effect-js教程-PHP中文网

深入理解与测试Redux-Saga中的all Effect

霞舞

发布： 2025-11-14 23:13:00

原创

895人浏览过

深入理解与测试redux-saga中的all effect

本文旨在解决Redux-Saga中测试`all` effect时常见的错误，特别是关于如何正确使用effect creator（如`call`）、理解Generator函数的行为以及避免不必要的mock。通过详细的代码示例和解释，读者将学会如何编写健壮的Saga及其对应的单元测试，确保`all` effect的正确执行和验证。

在Redux-Saga中，all effect是一个强大的工具，它允许我们并行地执行多个Saga effect，并在所有effect都完成后才继续执行。然而，在为其编写单元测试时，开发者常常会遇到一些挑战。本教程将深入探讨这些常见问题，并提供一套清晰、专业的解决方案。

1. all Effect的正确用法：Effect Creator的必要性

在使用all effect时，一个常见的误区是直接将普通的JavaScript函数传递给它。all effect期待接收的是一系列的“effect描述符”（Effect Descriptors），而不是可以直接调用的函数。这些描述符通常由Redux-Saga提供的各种“effect creator”函数（如call, fork, put, select等）生成。

错误示例：

// 错误用法：直接传递普通函数
export default function* rootSaga() {
  yield all([
    testfunction(), // 这是一个普通函数调用，而非effect描述符
  ]);
}

登录后复制

当testfunction()被直接调用时，它会立即执行并返回其结果，而不是一个Redux-Saga可以解释并执行的effect。

正确用法：使用 call Effect Creator 如果你想在Saga中调用一个普通函数，并使其成为一个可被Redux-Saga管理和测试的effect，你应该使用call effect creator。call effect会生成一个特殊的描述符，指示Saga middleware去执行指定的函数。

// saga.ts
import { all, call } from "redux-saga/effects";

// 这是一个普通的JavaScript函数
export const testfunction = () => 'test_value';

// rootSaga现在正确地使用了call effect
export default function* rootSaga() {
  yield all([
    call(testfunction), // 正确：传递call effect描述符
  ]);
}

登录后复制

通过call(testfunction)，我们创建了一个effect描述符，它告诉Redux-Saga去执行testfunction。

2. Generator函数测试：理解 next() 方法与 yielded 值

测试Saga的核心在于迭代Generator函数，并断言它每次yield出的值是否符合预期。Generator函数通过调用其next()方法来推进执行，并且每次调用next()都会返回一个包含value和done属性的对象。value属性就是Generator函数yield出的内容。

常见错误：将 next 视为属性

// 错误用法：next不是属性，而是方法
expect(generator.next.value).toEqual(all([testfunction]));

登录后复制

next是一个方法，必须通过generator.next()来调用，才能获取到迭代结果。

正确用法：调用 next() 方法

白瓜面试

白瓜面试 - AI面试助手,辅助笔试面试神器

查看详情

// saga.test.ts
import { all, call } from "redux-saga/effects";
import rootSaga, { testfunction } from "./saga";

it("SagaRoot", () => {
  const generator = rootSaga(); // 创建Generator实例

  // 第一次调用next()，获取rootSaga yield出的第一个值
  // 这个值应该是一个all effect，包含了call(testfunction)
  expect(generator.next().value).toEqual(all([call(testfunction)]));

  // 第二次调用next()，由于rootSaga已经没有更多的yield语句，
  // 此时done为true，value为undefined
  expect(generator.next().value).toEqual(undefined);
});

登录后复制

在上述测试中，我们首先创建了rootSaga的Generator实例。接着，我们调用generator.next().value来获取rootSaga第一次yield出的值，并断言它是否等于all([call(testfunction)])。请注意，这里我们断言的是一个all effect，它内部包含了call(testfunction)这个effect描述符，而不是testfunction的实际返回值。Saga测试的核心是验证effect的描述符，而不是其最终执行结果。

3. 避免不必要的 Mocking

在测试Saga时，如果只是为了验证Saga是否正确地yield了某个call effect，通常不需要对被call的函数进行jest.fn()这样的mock。因为我们测试的是Saga本身yield出的effect描述符，而不是testfunction实际被调用后的行为。Redux-Saga的测试哲学是：测试Saga的纯粹性，即它根据输入（action、state）yield出正确的effect。

错误示例：不必要的 jest.fn()

// 不必要：在测试Saga的yielded effect时，通常无需mock被call的函数
const testfunction = jest.fn();

登录后复制

只有当你需要模拟testfunction的特定返回值或其副作用，并且你的Saga逻辑依赖于这些模拟行为时，才需要使用jest.fn()。在验证all([call(testfunction)])这种基本结构时，直接使用原始函数即可。

完整示例代码

结合以上最佳实践，以下是完整的Saga和其对应的测试代码。

saga.ts

import { all, call } from "redux-saga/effects";

// 这是一个普通的JavaScript函数
export const testfunction = () => 'test_value';

export default function* rootSaga() {
  yield all([
    call(testfunction), // 使用call effect creator
  ]);
}

登录后复制

saga.test.ts

import { all, call } from "redux-saga/effects";
import rootSaga, { testfunction } from "./saga"; // 导入原始函数和Saga

describe("rootSaga", () => {
  it("应该正确地yield一个包含call(testfunction)的all effect", () => {
    const generator = rootSaga(); // 创建Generator实例

    // 验证第一次yield出的effect
    expect(generator.next().value).toEqual(all([call(testfunction)]));

    // 验证Generator是否已完成
    expect(generator.next().value).toEqual(undefined);
  });
});

登录后复制

测试结果示例：

 PASS   redux-saga-examples  packages/redux-saga-examples/src/stackoverflow/76481662/saga.test.ts
  ✓ SagaRoot (3 ms)

----------|---------|----------|---------|---------|-------------------
File      | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s 
----------|---------|----------|---------|---------|-------------------
All files |   83.33 |      100 |      50 |     100 |                   
 saga.ts  |   83.33 |      100 |      50 |     100 |                   
----------|---------|----------|---------|---------|-------------------
Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        2.202 s

登录后复制

总结与注意事项

Effect Creator至关重要： all effect以及其他Saga effect（如takeEvery, takeLatest等）都需要接收由Redux-Saga提供的effect creator生成的描述符，而不是普通的函数调用结果。
Generator函数机制： 牢记generator.next()是一个方法，它返回一个包含value和done属性的对象。Saga测试的重点是验证value属性是否为预期的effect描述符。
测试纯粹性： Redux-Saga的测试鼓励我们测试Saga的纯粹性——即它根据输入yield出正确的effect。通常情况下，你不需要mock被call或fork的函数本身，除非你需要模拟复杂的异步行为或错误场景。
逐步测试： 对于复杂的Saga，可以逐步调用generator.next()，并对每一步yield出的effect进行断言，以确保Saga的逻辑流程正确。

遵循这些原则，你将能够更有效地编写和测试Redux-Saga中的all effect，确保你的异步逻辑既健壮又易于维护。

以上就是深入理解与测试Redux-Saga中的all Effect的详细内容，更多请关注php中文网其它相关文章！