用反应打字稿在开玩笑中嘲笑API呼叫

Question

我正在遵循一些文档，以与Jest嘲笑API呼叫，尽管试图与react.tsx一起做。 我在网上和其他地方查看了许多不同的堆栈Q＆amp;，并且不了解我从测试文件中缺少什么来进行测试。 到目前为止，我正在从weathermocks.tsx中导出我的fetchweatherdata函数：

import axios from 'axios';
    
export const fetchWeatherData = async () => {
  const response = await axios.get('http://mock-api-call/weather/get-weather');
  return response.data.result.weather.forcast;
};

并将其导入到我试图使用此功能模拟数据的测试文件中。 weather.test.tsx：

import axios from 'axios';
import { fetchWeatherData } from '../../__mocks__/WeatherMocks';
    
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;
    
describe('mock api calls', () => {
  afterEach(() => {
    jest.resetAllMocks();
  });
    
  test('return forcast Sunny', async () => {
    mockedAxios.get.mockResolvedValue({
       data: {
         result: {
           weather: {
            forcast: 'Sunny',
            max: 28,
            min: 17,
            description: 'Clear skys all day with a warm summber breaze ariving in the afternoon',
          },
        },
      },
    });

    const forecast = await fetchWeatherData();
    expect(forecast.forcast).toEqual('Sunny');
  });
});

如果有人可以帮助我克服这个障碍，我将非常感谢它，因为我被告知这是一种非常简单的方法。

新测试错误

 expect(received).toEqual(expected) // deep equality
    
    Expected: "Sunny"
    Received: undefined
    
      24 |     });
      25 |     const forecast = await fetchWeatherData();
    > 26 |     expect(forecast.forcast).toEqual('Sunny');
         |                              ^
      27 |   });
      28 | });
      29 |

Answer 1

第二个答案

是失败的，因为在您的方法中，您已经在返回天气：

  // ...
  const forecast = await fetchWeatherData();
  const expect(forecast).toEqual('Sunny');
  // ...

---

先前的答案

您正在做的事情已经正确，但是您没有创建以后访问的对象结构：

import axios from 'axios';
import { fetchWeatherData } from '../../__mocks__/WeatherMocks';

jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;

describe('mock api calls', () => {
  afterEach(() => {
    jest.resetAllMocks();
  });

  test('return forcast Sunny', async () => {
    mockedAxios.get.mockResolvedValue({
      // You need to mock all the structure:
      // response -> data -> result -> weather -> forcast
      // You have only:
      // response -> data
      data: {
        result: {
          weather: {
            // Are you sure its forcast and not forecast??
            forcast: 'Sunny',
            max: 28,
            min: 17,
            description: 'Clear skys all day with a warm summber breaze ariving in the afternoon',
          },
        },
      },
    });

    const forecast = await fetchWeatherData();
    expect(forecast).toEqual('Sunny');
  });
});