javascript - 在 promise API 调用 jest 中测试 then()

Question

我正在尝试测试一个函数，它是一个 api 调用/ promise ，因此我可以使用 jest 检查 then 中的状态，但似乎无法弄清楚该怎么做。我试过模拟文件和返回 promise 的函数，但出现错误 TypeError: (0 , _dataAccess.fetchBundlesFromApi) is not a function堆栈溢出有许多不同的答案，但似乎都没有用。这是我要测试的代码。我希望能够调用它，然后说是否可以检查状态或者是否有错误执行其他操作。以下是我尝试执行的代码以及我尝试过的模拟。

getLatestPrices = params => {
    const { updateBundles } = this.props;

    fetchBundlesFromApi(params)
      .then(({ data: { bundles } }) => {
        updateBundles(bundles);
        this.setState({ showUpdatingPrices: false });
        window.TemplateCalculator.reload();
      })
      .catch(() => goToUrl(bundlesUrl));
  };`

fetchBundlesFromApi 是 import { fetchBundlesFromApi } from '../../../../dataAccess'; 这是一个 axios 调用:

const fetchBundlesFromApi = params => axios(`${bundleRoute}/bundles${params}`);

export { fetchBundlesFromApi };

这是我试过的mocking。

jest.mock('../../../../dataAccess', () => ({
      fetchBundlesFromApi: new Promise(resolve => resolve({ data: mockBundles })),
    }));

我也试过这些网站: https://binarapps.com/blog/test-ajax-calls-in-react-component-lifecycle . Jest/Enzyme Error: "Method 'setState' is only meant to run on a single node. 3 found instead." https://jestjs.io/docs/en/asynchronous

Answer 1

我发现我必须像这样导入我的 api 调用函数:

import { fetchBundlesFromApi } from '../../../../dataAccess';

由于该函数使用的是 axios，所以我不得不模拟它。我是这样做的:

jest.mock('axios', () => jest.fn(() => Promise.resolve({ data: mockBundles })));

在我的测试中，我将其设置为异步，我可以等待该函数响应。

const fetchedBundles = await fetchBundlesFromApi(
  'params',
);