测试用fetch-mock“无法读取未定义的属性”来响应Redux异步操作。

Question

我在测试redux异步操作时遇到了一些问题，因为某些原因，store.dispatch返回未定义的并且.then方法不能工作。

当我console.log store.dispatch(actions.requestChartData())时，它会给出以下错误：

fetch-模拟:没有为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操作创建者中，返回fetch，而不是仅仅调用它。返回fetch(‘/your api-path’)