如何测试调用外部 api 的 redux-saga 的生成器？

Question

在编写测试方面，我完全是初学者，但我被分配了测试一些 api 实现的任务，这是使用 redux 和 redux-saga 完成的。场景是用户用他的用户名、密码填写准备好的表单，我的生成器函数“authenticateUser”从 api 调用正确的端点（api 处理程序是从 Swagger 自动生成的，并从私有注册表导入），以创建令牌并检查用户是否存在在数据库中。如果是这样，则将令牌保存到会话/本地存储中，并使用相应的值更新存储。

import { userAuthenticated, userAuthenticationRejected } from "../actions/user";
import { call, put } from "redux-saga/effects";
import createApi from "@my-module";

export function* authenticateUser(action) {
  const myApi = yield call(createApi, {
    cors: true,
    securityHandlers: {
      Basic: () => true,
      Bearer: () => true
    }
  });

  try {
    const response = yield call(myApi.token_create, {
      data: {
        username: action.payload.username,
        password: action.payload.password
      }
    });
    if (response.status === 200) {
      const body = yield call([response, "json"]);
      const accessToken = body.access;
      window.sessionStorage.setItem("accessToken", accessToken);
      if (action.payload.persistAuthenticationToken) {
        window.localStorage.setItem("accessToken", accessToken);
      }

      yield put(
        userAuthenticated({
          username: action.payload.username,
          accessToken
        })
      );
    } else {
      throw new Error("Unauthorized");
    }
  } catch (error) {
    yield put(userAuthenticationRejected());
  }
}

在阅读有关测试方法的信息时，我完全迷失了方向。我已经尝试使用连续的“generator.next().value”进行简单的单元测试，但是在第一次 yield 之后它甚至无法进入“try”块并且比预期的更快地抛出“undefined”。

test("User authentication", () => {
  const action = {
    payload: {
      username: "test",
      password: "test"
    }
  };
  const generator = cloneableGenerator(authenticateUser)(action);
  console.log(generator.next().value);

  // {
  //   '@@redux-saga/IO': true,
  //   combinator: false,
  //   type: 'CALL',
  //   payload: {
  //     context: null,
  //     fn: [Function: createApi],
  //     args: [ [Object] ]
  //   }
  // }

  console.log(generator.next().value);

  // {
  //   '@@redux-saga/IO': true,
  //   combinator: false,
  //   type: 'PUT',
  //   payload: {
  //     channel: undefined,
  //     action: { type: 'USER_AUTHENTICATION_REJECTED' }
  //   }
  // }

  console.log(generator.next().value);

  // undefined

});

当我查看似乎是首选方式的集成测试时，我不能简单地将相对简单的示例转移到我的具体案例中。

我会很感激任何帮助，因为我不知道从哪里开始。

Answer 1

您需要为响应对象传入一个模拟值。我认为它是未定义的，如果response.status 不是 200，你的代码就会抛出异常。所以对于你自己来说，对generator.next().value 的调用会像这样传递一个模拟：

const responseMock = {
    status: 200,
     // anything else it needs
}
console.log(generator.next(reponseMock).value)