为什么我无法在这里使用mockResolvedValue？

Question

我\xe2\x80\x99m 不清楚如何在使用以下设置时模拟我的 api 响应。

\n

我有以下测试：

\n

import React from \'react\';\nimport { cleanup, render, wait } from \'@testing-library/react\';\nimport axios from \'axios\';\nimport Condition from \'./index.jsx\';\n\njest.mock(\'axios\', () => {\n  return {\n    create: jest.fn(() => ({\n      get: jest.fn().mockResolvedValue({ data: {} }),\n      interceptors: {\n        request: { use: jest.fn(), eject: jest.fn() },\n        response: { use: jest.fn(), eject: jest.fn() },\n      },\n    })),\n  };\n});\n\n\nafterEach(cleanup);\n\ntest(\'fetches and displays data\', async () => {\n  axios.get.mockResolvedValue({ data: \'mock data\' });\n  const { container } = render(<Condition {...props} />);\n  await wait(() => expect(container.textContent).toContain(\'Current milestone\'));\n  expect(container).toBeDefined();\n});\n

\n

\xe2\x80\xa6 和以下 api 帮助器：

\n

import axios from \'axios\';\n\nconst api = axios.create({\n  baseURL: window.apiPath,\n  withCredentials: true,\n});\n\napi.interceptors.request.use(config => {\n  const newConfig = Object.assign({}, config);\n  newConfig.headers.Accept = \'application/json\';\n\n  return newConfig;\n}, error => Promise.reject(error));\n\nexport default api;\n

\n

我的Condition组件在安装时使用以下函数来获取数据：

\n

const fetchAsync = async endpoint => {\n  const result = await api.get(endpoint);\n  setSuffixOptions(result.data.data);\n  console.log(\'result.data.data\', result.data.data);\n};\n

\n

这axios.get.mockResolvedValue({ data: \'mock data\' });测试中的行会导致以下错误

\n

    TypeError: Cannot read property \'mockResolvedValue\' of undefined\n\n      124 |\n      125 | test(\'fetches and displays data\', async () => {\n    > 126 |   axios.get.mockResolvedValue({ data: \'mock data\' });\n          |             ^\n      127 |   const { container } = render(<Condition {...props} />);\n      128 |   await wait(() => expect(container.textContent).toContain(\'Current milestone\'));\n      129 |   expect(container).toBeDefined();\n

\n

我应该使用不同的方法来模拟响应吗？

\n

编辑\n呼叫axios.create.get.mockResolvedValue({ data: \'mock data\' });会导致相同的错误。

\n

Answer 1

要模拟您的 api 响应，您可以jest.spyOn与 结合使用mockImplementation，例如如下：

import api from './api';

const mock = jest.spyOn(api,"get");
mock.mockImplementation(() => Promise.resolve({ data: {} }));

在上面的示例中，该api.get方法被替换为模拟成功调用返回{ data: 'mock data' }。

可以将其放置在您的test函数中，如下所示：

test('fetches and displays data', async () => {
    const mock = jest.spyOn(api, "get");
    mock.mockImplementation(() => Promise.resolve({ data: {} }));
    const { container } = render(<Condition {...props} />);
    await wait(() => expect(container.textContent).toContain('Current milestone'));
    expect(container).toBeDefined();
});