從 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)
  }
}));