Reactjs 如何使用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获取响应，我想模拟这个服务。有人能帮我吗？

你需要从

ViewServiceClass

类中监视你的

getFiltersList

方法

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;

然后模拟一些响应数据（a

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

。

我已经更新了这个问题，实际上我正在对

getFiltersData

方法进行API调用。在这种情况下，我必须监视

getFiltersData

是否正确？

getFiltersData

是否在另一个类中？事实上，我们应该工作！只需在新方法的示例中进行替换。不在同一调用中的不同调用中，但getFilterList位于ViewService类中。就像我在上面的问题中提到的那样。@AdriSolidIt在我将beforeAll和aftereall方法正确放置在测试类中时起作用。