如何使用 JEST 模拟 Axios 服务包装器

问题描述

我正在使用 JEST 测试框架为我的 React JS 应用程序编写测试用例。我正在使用我们的内部 axios 包装器进行服务调用。我想使用 JEST 来模拟该包装服务。有人可以帮我解决这个问题吗？

import Client from 'service-library/dist/client';
import urls from './urls';
import { NODE_ENV,API_VERSION } from '../screens/constants';
const versionHeader = 'X-API-VERSION';
class ViewServiceClass extends Client {
  getFiltersList(params) {
    const config = {
      method: urls.View.getFilters.requestType,url: urls.View.getFilters.path(),params,headers: { [versionHeader]: API_VERSION },};
    return this.client.request(config);
  }
const options = { environment: NODE_ENV };
const ViewService = new ViewServiceClass(options);
export default ViewService;

以上是进行 API 调用的服务实现。我正在利用我们内部库中的 axios 实现。

getFiltersData = () => {
    const params = {
      filters: 'x,y,z',};
    let {
      abc,def,ghi
    } = this.state;
    trackPromise(
      ViewService.getFiltersList(params)
        .then((result) => {
          if (result.status === 200 && result.data) {
            const filtersJson = result.data;
            
        .catch(() =>
          this.setState({
            alertMessage: 'No Filters Data Found. Please try after some time',severity: 'error',showAlert: true,})
        )
    );
  };

我正在使用 ViewService 来获取响应，并且我想模拟此服务。有人可以帮我解决这个问题吗？

解决方法

您需要从 getFiltersList 类中监视您的 ViewServiceClass 方法。

然后模拟一些响应数据（Promise），例如：

import ViewService from '..';

const mockedData = {
  status: 'ok',data: ['some-data']
};

const mockedFn = jest.fn(() => Promise.resolve(mockedData));

let getFiltersListSpy;

// spy the method and set the mocked data before all tests execution
beforeAll(() => {
  getFiltersListSpy = jest.spyOn(ViewService,'getFiltersList');
  getFiltersListSpy.mockReturnValue(mockedFn);
});

// clear the mock the method after all tests execution
afterAll(() => {
  getFiltersListSpy.mockClear();
});

// call your method,should be returning same content as `mockedData` const
test('init',async () => {
  const response = await ViewService.getFiltersList();
  expect(response).toEqual(mockedData);
});

P.D：您可以将 params 传递给该方法，但您还需要根据需要配置 mockedData。