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

Question

我正在使用 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 获取响应，我想模拟此服务。有人可以帮我解决这个问题吗？

Answer 1

您需要从 ViewServiceClass class.

中窥探您的 getFiltersList 方法

然后模拟一些响应数据（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。

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

How to mock Axios service wrapper using JEST

reactjs

jestjs

axios

jest-fetch-mock