Question

我正在尝试在组件内部测试一个仅在API请求成功时调用的函数。对于上下文，当您单击按钮时，我将此函数称为：

return onUpdate(params, setError, success, cancel);

成功后将调用成功函数：

const success = (data) => {
  // do some stuff when successful
};

onUpdate函数已导入，它是如下所示的API请求：

const onUpdate = (params, onError, onSuccess, onCancel) => {
  save(params)
    .then((data) => {
      if (onSuccess) {
        onSuccess(data.data);
      }
    })
    .catch((error) => {
      if (axios.isCancel(error)) {
        if (onCancel) {
          onCancel();
        }
      } else {
        onError(error);
      }
    });
};

在测试中，我一直在模拟该功能的实现：

jest.mock('../../dataAccess', () => ({
  onUpdate: jest
    .fn()
    .mockImplementation(
      (params, onError, onSuccess) =>
        new Promise((resolve) => resolve(onSuccess(response))),
    ),
}));

通过阅读文档/堆栈溢出，它看起来像是在an example question中传递了回调，并且如果我添加其他参数并添加cb作为最后一个参数，它似乎仍然不会触发我成功功能。

我需要模拟什么才能获得测试以在组件中调用成功函数？我确定它很小，但不确定。

Answer 1

当您返回一个new Promise基本上是隐蔽的功能时，您将从基于回调的功能转换为异步功能，请尝试执行以下操作：

jest.mock('../../dataAccess', () => ({
  onUpdate: jest
    .fn()
    .mockImplementation(
      (params, onError, onSuccess) => {
        onSuccess(response)
      }
    ),
}));

或更简单：

jest.mock('../../dataAccess', () => ({
  onUpdate: (params, onError, onSuccess) => {
     onSuccess(response)
  }
}));

从Promise开玩笑的嘲笑回调函数

1 个答案: