Тестирование React Redux Async Actions с fetch-mock - "Не удается прочитать свойство then" из undefined"

Question

У меня есть некоторые проблемы с тестированием активных реакций при асинхронном восстановлении, по какой-то причине store.dispatch возвращает undefined, а метод.then не работает.

Когда я console.log store.dispatch(actions.requestChartData()) он выдает мне следующую ошибку:

fetch-mock: для GET не определен запасной ответ на https://swapi.co/api/people

Ведьма означает, что нет ложного ответа, и он не определен.

Я не знаю, где моя ошибка, в URL или что-то, что я пропускаю. Любая помощь будет оценена

Вот мой код action.js:

import {
    ROOT_URL,
    API_KEY,
    FETCH_POSTS,
    CREATE_POST,
    REQUEST_CHART_DATA_PENDING,
    REQUEST_CHART_DATA_SUCCESS,
    REQUEST_CHART_DATA_FAILED
} from '../constants/constants'

export const requestChartData = () => (dispatch) => {
    dispatch({type: REQUEST_CHART_DATA_PENDING})

    fetch('https://swapi.co/api/people')
        .then(response => response.json())
        .then(data => dispatch({type: REQUEST_CHART_DATA_SUCCESS, 
                labels: data.results.map(label => label.name),
                chartData: data.results.map(chartData => chartData.height )}))

        .catch(error => dispatch({type: REQUEST_CHART_DATA_FAILED, payload: error}))        
}

И мой файл action.test.js:

import * as actions from '../../actions/index'
import fetchMock from 'fetch-mock'
import {
    ROOT_URL,
    API_KEY,
    FETCH_POSTS,
    CREATE_POST,
    REQUEST_CHART_DATA_PENDING,
    REQUEST_CHART_DATA_SUCCESS,
    REQUEST_CHART_DATA_FAILED
} from '../../constants/constants'

import thunkMiddleware from 'redux-thunk'
import configureMockStore from 'redux-mock-store'

const mockStore = configureMockStore([thunkMiddleware])

describe('fetching api url', () => {
 afterEach(() => {
   fetchMock.restore()
 })

 it('creates REQUEST_CHART_DATA_SUCCESS when fetching has been done', () => {
   fetchMock.getOnce('https://swapi.co/api/people', {
  body: { todos: ['do something'] },
  headers: { 'content-type': 'application/json' }
   })
  
   const expectedActions = 
  { type: REQUEST_CHART_DATA_SUCCESS, body: { todos: ['do something'] } }
 
   const store = mockStore({ todos: [] })
  
   return store.dispatch(actions.requestChartData()).then(() => {
  
  expect(store.getActions()).toEqual(expectedActions)
   })
  })
  })

Answer 1

В вашем создателе действия requestChartData возвращайте выборку, а не просто вызывайте ее. возвратный выбор ('/your-api-path')