Тестирование асинхронного действия c, вызываемого другим асинхронным действием c - PullRequest
Новая
       55

Тестирование асинхронного действия c, вызываемого другим асинхронным действием c

0 голосов
/ 07 января 2020

У меня есть asyn c Redux Action, которая вызывает другое asyn c Redux Action.

Я пытаюсь проверить это с помощью Jest / Enzyme, но получаю сообщение об ошибке, но не знаю, почему.

Первое действие - Добавить элемент

Это должно вызовите следующее асинхронное c действие fetchItemData, когда элемент добавлен успешно 

export function addItem(payload) {
  return dispatch => {
    dispatch(requestAddItem());
    return api
      .url(`api/items`)
      .post(payload)
      .json(response => {
        dispatch(addItemSuccess(response));
        dispatch(setSearchText(response.itemName));
        dispatch(setSearchBy('itemName'));
        dispatch(setFilterByStatus(''));
        dispatch(setFilterByType(''));
        dispatch(fetchItemData(response.itemName, 'itemName', '', 'asc', '', '', 1, 25));
      })
      .catch(err => {dispatch(addItemFail(err))} )
  }
}

Второе действие - извлечение данных элемента

Это действие должно извлечь данные элемента для возврата вновь добавленного элемента item. 

export function fetchItemData(text = '', searchBy = 'itemName', sortBy = '', sortOrder = 'asc', isLocked = '', isCreditCard = '', pageNumber = 1, pageSize = 25) {
  return dispatch => {
    dispatch(requestItemData());
    return api
      .query({
        searchType: searchBy,
        searchText: text,
        isLocked,
        isCreditCard,
        sortBy,
        sortOrder,
        pageNumber,
        pageSize,
      })
      .url('api/items')
      .get()
      .fetchError(err => {
        console.log(err);
        dispatch(itemAPIFail(err.toString()));
      })
      .json(response => dispatch(receiveItemData(response.items)))
  }
}

Тестовый файл: 

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

  it('creates ADD_ITEM_SUCCESS when addItem is successful', () => {
    const mockPayload = {
      itemType: "Payment",
      itemName: "Testing",
      itemDescription: "Testing",
      dateOpen: null,
      dateClose: null,
      isLocked: false,
      isExported: false,
      isCreditCard: false,
    };

    fetchMock.postOnce(`/api/items`, {
      body: mockPayload,
      headers: {'content-type': 'application/json'}
    });

    const mockResult = {
      itemId: 1,
      itemName: 'Testing'
    };

    const text = 'Testing';
    const searchBy = 'itemName';
    const isLocked = '';
    const isCreditCard = '';
    const sortBy = '';
    const sortOrder = 'asc';
    const pageNumber = 1;
    const pageSize = 25;

    fetchMock.getOnce(`api/items?searchType=${searchBy}&searchText=${text}&isLocked=${isLocked}&isCreditCard=${isCreditCard}&sortBy=${sortBy}&sortOrder=${sortOrder}&pageNumber=${pageNumber}&pageSize=${pageSize}`, {
      body: {totalItems: 1, items: mockResult},
      headers: {'content-type': 'application/json'}
    });

    const expectedActions = [
      {type: REQUEST_ADD_ITEM, response: 'waiting'},
      {type: ADD_ITEM_SUCCESS, response: mockPayload, open: false},
      {type: SET_SEARCH_TEXT, searchText: mockPayload.itemName},
      {type: SET_SEARCH_BY, searchBy: 'itemName'},
      {type: SET_FILTER_BY_STATUS, filterByStatus: ''},
      {type: SET_FILTER_BY_TYPE, filterByType: ''},
      {type: REQUEST_ITEM_DATA, waiting: true},
    ];

    const store = mockStore({});

    return store.dispatch(addItem(mockPayload)).then(() => {

      store.dispatch(fetchItemData(text, searchBy, sortBy, sortOrder, isLocked, isCreditCard, pageNumber, pageSize)).then(() => {
        expect(store.getActions()).toEqual(expectedActions);
      });
    });
  });
});

Текст ошибки 

async actions › creates ADD_ITEM_SUCCESS when addItem is successful

    fetch-mock: No fallback response defined for GET to /api/items?searchType=itemName&searchText=Testing&isLocked=&isCreditCard=&sortBy=&sortOrder=
asc&pageNumber=1&pageSize=25

Я не уверен, почему эта ошибка происходит. Я передал все обязательные параметры и даже создал объект mockResult, но, похоже, он не получает ответ отката?

Буду признателен за любой совет. Спасибо.

1 Ответ

0 голосов
/ 07 января 2020

Извините все, я понял это. Я задумался над этим, и мне не нужно было отправлять оба действия вручную.

Новый тестовый файл 

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

  it('creates ADD_ITEM_SUCCESS when addItem is successful', () => {
    const mockPayload = {
      itemType: "Payment",
      itemName: "Testing",
      itemDescription: "Testing",
      dateOpen: null,
      dateClose: null,
      isLocked: false,
      isExported: false,
      isCreditCard: false,
    };

    fetchMock.postOnce(`/api/items`, {
      body: mockPayload,
      headers: {'content-type': 'application/json'}
    });

    const mockResult = {
      itemId: 1,
      itemName: 'Testing'
    };

    const text = 'Testing';
    const searchBy = 'itemName';
    const isLocked = '';
    const isCreditCard = '';
    const sortBy = '';
    const sortOrder = 'asc';
    const pageNumber = 1;
    const pageSize = 25;

    fetchMock.getOnce(`api/items?searchType=${searchBy}&searchText=${text}&isLocked=${isLocked}&isCreditCard=${isCreditCard}&sortBy=${sortBy}&sortOrder=${sortOrder}&pageNumber=${pageNumber}&pageSize=${pageSize}`, {
      body: {totalItems: 1, items: mockResult},
      headers: {'content-type': 'application/json'}
    });

    const expectedActions = [
      {type: REQUEST_ADD_ITEM, response: 'waiting'},
      {type: ADD_ITEM_SUCCESS, response: mockPayload, open: false},
      {type: SET_SEARCH_TEXT, searchText: mockPayload.itemName},
      {type: SET_SEARCH_BY, searchBy: 'itemName'},
      {type: SET_FILTER_BY_STATUS, filterByStatus: ''},
      {type: SET_FILTER_BY_TYPE, filterByType: ''},
      {type: REQUEST_ITEM_DATA, waiting: true},
    ];

    const store = mockStore({});

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