React Jest тестовые действия, которые приводят к API

Question

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

До сих пор я видел только примеры действий Jest-тестирования, которые не производят выборку, а скорее отправляют действие редуктору.

Как мне go проверить действие, которое вызывает API (в данном случае это сервер узла), но узел не будет доступен для запуска теста. Я думаю, что должно произойти, это издеваться над этим. Как бы я go об этом? Как я могу издеваться над выборкой?

import { VEHICLE } from './types';
import { API_ADDRESS } from '../config';


const fetchVehicle = ({ endpoint, options, SUCCESS_TYPE }) => (dispatch) => {
  dispatch({ type: VEHICLE.FETCH });
  return fetch(`${API_ADDRESS}/vehicle/${endpoint}`, options)
        .then(response => response.json())
        .then(json => {
          if (json.errors !== undefined) {
            dispatch({ type: VEHICLE.FETCH_ERROR, ...json });
          } else {
            // console.log('action', {...json})
            dispatch({ type: SUCCESS_TYPE, ...json });
          }
        })
        .catch(error => dispatch({
          type: VEHICLE.FETCH_ERROR, errors: [{ msg: error }]
        }));
}


export const fetchAllVehicles = ({ limit, skip }) => fetchVehicle({
  endpoint: '?limit=' + limit + '&skip=' + skip,
  options: { credentials: 'include' },
  SUCCESS_TYPE: VEHICLE.FETCH_ALL_SUCCESS
});


export const fetchVehicleId = ({ id }) => fetchVehicle({
  endpoint: `${id}`,
  options: { credentials: 'include' },
  SUCCESS_TYPE: VEHICLE.FETCH_ID_SUCCESS
});


export const deleteVehicleId = ({ id }) => fetchVehicle({
  endpoint: `${id}`,
  options: {
    method: 'DELETE',
    options: { credentials: 'include' },
  },
  SUCCESS_TYPE: VEHICLE.FETCH_DELETE_SUCCESS
});


export const addNewVehicle = ({ vehicle }) => fetchVehicle({
  endpoint: '',
  options: {
    method: 'POST',
    body: JSON.stringify({ ...vehicle }),
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include'
  },
  SUCCESS_TYPE: VEHICLE.FETCH_ADD_SUCCESS
});


export const updateVehicle = ({ vehicle }) => fetchVehicle({
  endpoint: `${vehicle.id}`,
  options: {
    method: 'PUT',
    body: JSON.stringify({ ...vehicle }),
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include'
  },
  SUCCESS_TYPE: VEHICLE.FETCH_UPDATE_SUCCESS
});


export const fetchAllLockedVehicles = ({ limit, skip }) => fetchVehicle({
  endpoint: 'locked/?limit=' + limit + '&skip=' + skip,
  options: { credentials: 'include' },
  SUCCESS_TYPE: VEHICLE.FETCH_LOCKED_SUCCESS
});


export const unlockVehicleId = ({ id }) => fetchVehicle({
  endpoint: `unlock/${id}`,
  options: {
    method: 'POST',
    options: { credentials: 'include' },
  },
  SUCCESS_TYPE: VEHICLE.FETCH_UNLOCK_SUCCESS
});


export const fetchVehiclesSearch = ({ search, limit, skip }) => fetchVehicle({
  endpoint: 'search/?search=' + search + '&limit=' + limit + '&skip=' + skip,
  options: { credentials: 'include' },
  SUCCESS_TYPE: VEHICLE.FETCH_SEARCH_SUCCESS
});


export const fetchLockedVehiclesSearch = ({ search, limit, skip }) => fetchVehicle({
  endpoint: '/locked/search/?search=' + search + '&limit=' + limit + '&skip=' + skip,
  options: { credentials: 'include' },
  SUCCESS_TYPE: VEHICLE.FETCH_LOCKED_SEARCH_SUCCESS
});


export const pushVehicleMessage = ({ type, status, message, fields }) => dispatch => {
  dispatch({ 
    type, 
    status,
    message,
    fields
  });
}


export const resetVehicle = () => dispatch => { 
  dispatch({ type: VEHICLE.RESET, status: 'success' }); 
}

Answer 1

Как вы уже догадались, идеальный тест будет имитировать запрос так, чтобы ваш тест контролировался и всегда вел себя одинаково.

Кроме того, вы должны учитывать, что, поскольку ваш код делает ajax запрос (это асинхронная операция по своей природе), вам придется объявить свой тест как asyn c (вы можете прочитать больше об асинхронных c tests здесь ).

В качестве примера, вот как вы можете протестировать успешный пример создателя действия fetchAllVehicles:

it('should get all vehicles', async () => {
    // Mock the global fetch call, returning a promise with a json method and the response data
    global.fetch = jest.fn().mockResolvedValue({
        json: () => ({ data: ['vehicle1', 'vehicle2'] })
    });

    // Mock the dispatch method in order to be able to make assertions
    const dispatch = jest.fn();

    // Call the action creator with the values.
    await fetchAllVehicles({
        limit: 10,
        skip: 2
    })(dispatch);

    // Assert that the dispatch method was called with the correct values.
    expect(dispatch).toHaveBeenCalledTimes(2);
    expect(dispatch).toHaveBeenCalledWith({
        type: VEHICLE.FETCH
    });
    expect(dispatch).toHaveBeenCalledWith({
        type: VEHICLE.FETCH_ALL_SUCCESS,
        data: ['vehicle1', 'vehicle2']
    });
});