Как я могу протестировать асинхронные действия, которые используют суперагент в моем проекте реакции с помощью Enzyme и Jest?

Я новичок в тестовой части проекта.

У меня проблема в личном проекте. Я использую «суперагент» для получения информации от Api, и теперь я хочу написать для него тест. Но я не могу использовать пакет fetch-mock, который использовался в примере Enzyme.

Вот мой файл действий.

   // getRecommendedProductsActions.js

    import request from 'superagent';

    export const getRecommendedProducts = () => (dispatch) => {
      dispatch(fetchProducts());
      return request
        .get(URL_PRODUCT_BASE)
        .set('Content-Type', 'application/json')
        .then(res => dispatch(receiveProducts(res.body)))
        .catch(err => dispatch(receiveFailure(err)));
    };

Вот мой тестовый файл.

// test/getRecommendedProducts.test.js

import configureMockStore from 'redux-mock-store';
import fetchMock from 'fetch-mock';
import thunk from 'redux-thunk';
import { getRecommendedProducts } from '../../src/actions/products';

describe('async actions', () => {
  afterEach(() => {
    fetchMock.reset();
    fetchMock.restore();
  });

  it('creates RECEIVE_PRODUCTS when fetching products has been done', () => {
    fetchMock
      .get('/products', {
        body: httpBody,
        headers: { 'content-type': 'application/json' },
      });

    const expectedActions = successResponse;

    const store = mockStore();

    return store.dispatch(getRecommendedProducts())
      .then(() => expect(store.getActions()).toEqual(expectedActions));
  });

И я обнаружил, что «суперагент» не основан на выборке, а «выборка-макет» не работает. Еще нахожу файл __mocks__/superagent.js.

// mock for superagent - __mocks__/superagent.js

let mockDelay;
let mockError;
let mockResponse = {
  status() {
    return 200;
  },
  ok() {
    return true;
  },
  body: {
    walla: true,
  },
  get: jest.fn(),
  toError: jest.fn(),
};

const Request = {
  post() {
    return this;
  },
  get() {
    return this;
  },
  send() {
    return this;
  },
  query() {
    return this;
  },
  field() {
    return this;
  },
  set() {
    return this;
  },
  accept() {
    return this;
  },
  timeout() {
    return this;
  },
  end: jest.fn().mockImplementation(function (callback) {
    if (mockDelay) {
      this.delayTimer = setTimeout(callback, 0, mockError, mockResponse);

      return;
    }

    callback(mockError, mockResponse);
  }),
  // expose helper methods for tests to set
  __setMockDelay(boolValue) {
    mockDelay = boolValue;
  },
  __setMockResponse(mockRes) {
    mockResponse = mockRes;
  },
  __setMockError(mockErr) {
    mockError = mockErr;
  },
};

module.exports = Request;

Спасибо за вашу помощь, ребята.

что не так с fetch-mock, что вы не можете его использовать?

skyboyer 21.09.2018 10:44

@skyboyer Я думаю, что «суперагент» не основан на выборке, и тогда «выборка-макет» не работает.

alex.l 21.09.2018 11:23

О, я вижу. Я проверил источник, и он использует XMLHttpRequest в качестве основы. Также проект упоминает на своей странице «суперагент-насмешник» и «суперагент-насмешник», попробуйте их.

skyboyer 21.09.2018 17:16
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
3
563
0

Другие вопросы по теме