Блог

Я хотел бы написать в тестовом примере для метода getFiltersData в FiltersComponent.js классе, который в дальнейшем выполняет запрос API (я использую библиотеку, которая обеспечивает реализацию axios, я могу получить к ней доступ через ViewService.js класс, как указано ниже). Я смог имитировать вызов службы и настроить некоторые фиктивные данные, которые работают нормально. Но я хотел бы протестировать еще один блок реализации, который выполняет инкапсуляцию в состояния. Вот фрагмент кода, может ли кто-нибудь помочь мне, как я могу реализовать тестовый пример для остальной части блока кода.

FiltersComponent.js

 import React, { PureComponent } from 'react';
import { Criteria } from 'react-components';
import { trackPromise } from 'react-promise-tracker';
import PropTypes from 'prop-types';
import Moment from 'moment';
import { getCriteriaFilterOption } from '../util/util';
import ViewService from '../services/ViewService';

class FiltersComponent extends PureComponent {

constructor(props) {
    super(props);
    this.state = {
      categories: [],
      categoriesOptions: [],
      subCategories: [],
      subCategoriesOptions: [],
};

  componentDidMount() {
    const { type } = this.props;
    this.getFiltersData();
  }
 getFiltersData = () => {
    const params = {
      filters: 'category,subcategory',
    };
    let {
      categoriesOptions,
      subCategoriesOptions,
    } = this.state;
    trackPromise(
      ViewService.getList(params)
        .then((result) => {
          if (result.status === 200 amp;amp; result.data) {
            const filtersJson = result.data;
            categoriesOptions = categoriesOptions.concat(
              getCriteriaFilterOption(filtersJson.categories, true)
            );
            subCategoriesOptions = subCategoriesOptions.concat(
              getCriteriaFilterOption(filtersJson.subCategories, true)
            );
            statesOptions = statesOptions.concat(getCriteriaFilterOption(filtersJson.states));
            this.setState({
              categoriesOptions,
              subCategoriesOptions,
            });
          }
        })
        .catch(() =>
          this.setState({
            alertMessage: 'No Filters Data Found. Please try after some time',
            severity: 'error',
            showAlert: true,
          })
        )
    );
  };
}
 

ViewService.js

 import Client from 'dist/client';
import urls from './urls';
import { NODE_ENV, API_VERSION } from '../screens/constants';

const versionHeader = 'X-API-VERSION';
class ViewServiceClass extends Client {
  getList(params) {
    const config = {
      method: urls.View.getFilters.requestType,
      url: urls.View.getFilters.path(),
      params,
      headers: { [versionHeader]: API_VERSION },
    };

    return this.client.request(config);
  }
 

Here is the test case which I have written:

FilterList.test.js

 import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import FiltersComponent from '../components/filtersComponent';
import filtersData from '../data/filters-data.json';
import ViewService from '../services/ViewService';

configure({ adapter: new Adapter() });

describe('API Test', () => {

  const getData = jest.fn();

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

  const params = {
    filters: 'abc,def,ghi',
  };

  let getListSpy;

  // spy the method and set the mocked data before all tests execution
  beforeAll(() => {
    getListSpy = jest.spyOn(ViewService, 'getList')
                          .mockImplementation(() => Promise.resolve(filtersData));
  });

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

  it('should your test scenario', async() => {
    await ViewService.getList(params)
      .then(data => {
        expect(data).toEqual(filtersData);
      });
  });

});