从 promise 开玩笑模拟回调 function

Question

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

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

当它成功时，它调用成功 function：

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

onUpdate function 是导入的，是 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);
      }
    });
};

我已经 mocking 在我的测试中实现了这个 function，如下所示：

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

从阅读文档/堆栈溢出来看，它看起来像是在一个示例问题中传递了一个回调，如果我添加其他参数并将cb添加为最后一个参数，它似乎仍然没有触发我的成功 function。

我需要模拟什么才能让我的测试在我的组件中调用我的成功 function？ 我确定它是非常小的东西，但不太确定是什么。

Answer 1

当你返回一个new Promise ，它基本上将你 function 从基于回调的回调转换为异步 function，尝试做类似的事情：

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

或者更简单：

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