Как макетировать вызов API с настройкой в ​​JEST? - PullRequest
Новая
       62

Как макетировать вызов API с настройкой в ​​JEST?

0 голосов
/ 13 апреля 2020

Я использую пакет @woocommerce/woocommerce-rest-api для моего API. Я использую Next JS и React Redux. Вот моя конфигурация woocommerce: 

import WooCommerceRestApi from '@woocommerce/woocommerce-rest-api';

export const wooApi = new WooCommerceRestApi({
   url: 'MY_API_URL',
   consumerKey: 'MY_CONSUMER_KEY',
   consumerSecret: 'MY_CONSUMER_SECRET',
   version: 'wc/v3',
   queryStringAuth: true,
});

Я отправляю действие сразу же после монтирования компонента.

Вот как я использую API в своем действии: 

export const fetchMainProductCategories = () => {
    return async (dispatch: Dispatch) => {
       try {
          const response = await wooApi.get(`products/categories?hide_empty=true&parent=0`);
          dispatch<FetchMainProductCategories>({
             type: CategoryTypes.fetchMainProductCategories,
             payload: response.data,
        });

        } catch (error) {
             console.log(error);
        }
      };
   };

Вот мои первоначальные тестовые заявления, но я не работаю: 

import React from 'react';
import '../../__mocks__/matchMedia';
import MockCategories from '../../__mocks__/mockCategories';
import { render, cleanup, logDOM } from '@testing-library/react';
import Index from '../../pages/index';
import Root from '../../Root';
import { wooApi } from '../../config';

jest.mock('../../config');

describe('Homepage', () => {
   beforeEach(() => {
      render(
        <Root>
          <Index />
       </Root>
    );
 });

 afterEach(cleanup);

 it('loads Product Categories', async () => {
       wooApi.get.mockResolvedValueOnce({
          data: MockCategories,
       });
       logDOM();
    // const list = await waitFor(() => screen.getByTestId('category-list'));
    });
 });

Ответы [ 2 ]

1 голос
/ 13 апреля 2020

Вам необходимо зарегистрировать метод get для wooApi как макет, сохранив при этом другие функции api. ie: 

import { wooApi } from '../../config'
import { fetchMainProductCategories } from '../where-it-is-defined'

// mark get method as jest mock
jest.mock('../../config', () => ({
   ...jest.requireActual('../../config'), // to avoid overriding other methods/features
   get: jest.fn(), // override get method of the api
}))

describe('Homepage', () => {
   beforeEach(()=>{
      wooApi.get.mockResolvedValue({
         status: 200,
         data: { categories: ['a', 'b'] },
   })

   test('loads ...', async () => {
   const dispatch = jest.fn()

   await fetchMainProductCategories()(dispatch)

   expect(dispatch).toHaveBeenCalledWith(
      { type: '...',
        payload: { categories: ['a', 'b'] }
      }
    )
   })
})

Ссылка: Шунтирование модуля в Jest

0 голосов
/ 13 апреля 2020

Отредактировано: Плохо, делая jest.spyOn(config.wooApi, 'get'), мы только издеваемся над методом get для одного экземпляра. Следующий отредактированный код должен работать

. Вы также можете использовать jest.spyOn только для насмешки метода get, как показано ниже 

import * as config from '../../config'

jest.spyOn(WooCommerceRestApi.prototype, 'get')
WooCommerceRestApi.prototype.get.mockResolvedValue('...')
...