Использование fetch-mock в нескольких тестовых примерах - нет отступления для метода GET - PullRequest
Новая
       30

Использование fetch-mock в нескольких тестовых примерах - нет отступления для метода GET

0 голосов
/ 08 ноября 2019

Я создаю контрольные примеры для своих действий thunk redux.

Ниже приведены действия с избыточностью, которые я реализую. Обратите внимание, что fetchSkus отражает хранилище для отправки на бэкэнд-сервер (поэтому я и включил исходное состояние для справки) 

// src/store/SkuGeneration.js

  const initialState = {
  skus: [],
  isLoading: false,
  disableExcluded: true,
  errors: {},
  includedProductGroupId: 0,
  excludedProductGroupId: 0,
  isRedlines: false
};

export const actionCreators = {
  fetchSkusRequest: () => {
    return {
      type: FETCH_SKUS_REQUEST
    };
  },
  fetchSkus: () => async (dispatch, getState) => {
    const {
      includedProductGroupId,
      excludedProductGroupId,
      isRedlines
    } = getState();

    dispatch({ type: FETCH_SKUS_REQUEST });

    return await fetch(
      `/Sku/GetSkus?pgId=${includedProductGroupId}&excluded=${excludedProductGroupId}&redlines=${isRedlines}`
    )
      .then(res => res.json())
      .then(data =>
        dispatch({
          type: FETCH_SKUS_SUCCESS,
          payload: data
        })
      )
      .catch(err =>
        dispatch({
          type: FETCH_SKUS_FAILED,
          payload: err
        })
      );
  },
  passExcludedPG: () => {
    return {
      type: PASS_EXCLUDED_PRODUCT_GROUP
    };
  },
  handleInput: e => {
    const key = e.target.id;
    const value = e.target.value;

    return {
      type: HANDLE_INPUT,
      payload: {
        key,
        value
      }
    };
  }
};

И это мой тестовый пример для действий извлечения 

// src/store/SkuGeneration.test.js

import fetchMock from "fetch-mock";
import configureMockStore from "redux-mock-store";
import thunk from "redux-thunk";
import {
  reducer,
  actionCreators,
  FETCH_SKUS_SUCCESS,
  FETCH_SKUS_REQUEST,
  FETCH_SKUS_FAILED,
  PASS_EXCLUDED_PRODUCT_GROUP,
  HANDLE_INPUT
} from "./SkuGeneration";


const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const initalState = {
  skus: [],
  isLoading: false,
  disableExcluded: true,
  errors: {},
  includedProductGroupId: 0,
  excludedProductGroupId: 0,
  isRedlines: false
};
let store;

describe("SkuGeneration Reducers and Actions", () => {
  beforeEach(() => (store = mockStore(Object.assign(initalState))));
  afterEach(() => {
    fetchMock.reset();
    fetchMock.restore();
  });

  it("creates FETCH_SKUS_SUCCESS when fetching skus has been done", () => {
    fetchMock.getOnce("/Sku/GetSkus?pgId=10&excluded=0&redlines=false", {
      body: { skus: ["00000000", "00000001", "99999999"] },
      headers: { "content-type": "application/json" }
    });

    const expectedActions = [
      { type: FETCH_SKUS_REQUEST },
      {
        type: FETCH_SKUS_SUCCESS,
        payload: { skus: ["00000000", "00000001", "99999999"] }
      }
    ];

    store = mockStore({ ...initalState, includedProductGroupId: 10 });

    return store.dispatch(actionCreators.fetchSkus()).then(() => {
      expect(store.getActions()).toEqual(expectedActions);
    });
  });

  it("creates FETCH_SKUS_FAILED when fetch request is rejected", () => {
    fetchMock.getOnce("/Sku/GetSkus?pgId=11&excluded=11&redlines=false", {
      status: 400,
      statusText: "Bad Request"
    });

    const expectedActions = [
      { type: FETCH_SKUS_REQUEST },
      {
        type: FETCH_SKUS_FAILED,
        payload: { errors: { statusCode: 400, badRequest: "Request failed" } }
      }
    ];

    store = mockStore({ ...initalState, includedProductGroupId: 10 });
    return store.dispatch(actionCreators.fetchSkus()).then(() => {
      expect(store.getActions()).toEqual(expectedActions);
    });
  });

...

Первый тестовый пример работает правильно и проходит. Однако, если я вызову fetch-mock в моем случае печального пути, то это не удастся. 

SkuGeneration Reducers and Actions › creates FETCH_SKUS_FAILED when fetch request is rejected

    fetch-mock: No fallback response defined for GET to /Sku/GetSkus?pgId=10&excluded=0&redlines=false

      at Object.<anonymous>.FetchMock.executeRouter (node_modules/fetch-mock/cjs/lib/fetch-handler.js:106:9)
      at Object.<anonymous>.FetchMock.fetchHandler (node_modules/fetch-mock/cjs/lib/fetch-handler.js:56:21)
      at src/store/SkuGeneration.js:32:18
      at Object.dispatch (node_modules/redux-thunk/lib/index.js:11:18)
      at Object.it (src/store/SkuGeneration.test.js:71:18)
          at new Promise (<anonymous>)
      at Promise.resolve.then.el (node_modules/p-map/index.js:46:16)

Чего я не понимаю, так это того, что конечные точки разные, но контрольный пример терпит неудачу, как будто имитация не существует.

Я что-то здесь упускаю?

...