javascript - Redux 测试 - getState() TypeError : Cannot read property 'startDateIndex' of undefined

Question

我一直在查看使用 Visual Studio 提供的 .Net Core 示例测试 React + Redux。我不确定我是否完全走错了路，但我正在尝试测试为生成天气数据而编写的其中一项操作。我在看这个 Action :

export const actionCreators = {
    requestWeatherForecasts: (startDateIndex) => async (dispatch, getState) => {

        if (startDateIndex === getState().weatherForecasts.startDateIndex) {
            // Don't issue a duplicate request (we already have or are loading the requested data)
            return;
        }


        dispatch({ type: requestWeatherForecastsType, startDateIndex });

        const url = `api/SampleData/WeatherForecasts?startDateIndex=${startDateIndex}`;
        const response = await fetch(url);
        const forecasts = await response.json();
        dispatch({ type: receiveWeatherForecastsType, startDateIndex, forecasts });
    }
};

当我对此进行测试时，出现以下错误:

TypeError: Cannot read property 'startDateIndex' of undefined

我知道这是由操作开始时的检查引起的，但我似乎无法弄清楚为什么测试在到达行时一直失败。这是我测试的完整代码:

import configureMockStore from 'redux-mock-store';
import expect from 'expect';
import { actionCreators } from './WeatherForecasts';
import thunk from 'redux-thunk';
import fetchMock from 'fetch-mock';

const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
let state = { startDateIndex: 5, forecasts: [], isLoading: false };
const store = mockStore(() => state);

describe('WeatherForecasts Actions', () => {

    afterEach(function () {
        fetchMock.restore();
    });   

    it('Creates a Request and a Receive signal', () => {
        fetchMock.get('api/SampleData/WeatherForecasts?startDateIndex=0', {
            body: [{ "dateFormatted": "12/12/2018", "temperatureC": 6, "summary": "Warm", "temperatureF": 42 }, { "dateFormatted": "13/12/2018", "temperatureC": -17, "summary": "Scorching", "temperatureF": 2 }, { "dateFormatted": "14/12/2018", "temperatureC": 10, "summary": "Scorching", "temperatureF": 49 }, { "dateFormatted": "15/12/2018", "temperatureC": 30, "summary": "Hot", "temperatureF": 85 }, { "dateFormatted": "16/12/2018", "temperatureC": -4, "summary": "Balmy", "temperatureF": 25 }],
            headers: { 'content-type': 'application/json' }
        })

        const expectedActions = [
            { type: "REQUEST_WEATHER_FORECASTS", startDateIndex: 0},
            { type: "RECEIVE_WEATHER_FORECASTS", startDateIndex: 0, forecasts: [{ "dateFormatted": "12/12/2018", "temperatureC": 6, "summary": "Warm", "temperatureF": 42 }, { "dateFormatted": "13/12/2018", "temperatureC": -17, "summary": "Scorching", "temperatureF": 2 }, { "dateFormatted": "14/12/2018", "temperatureC": 10, "summary": "Scorching", "temperatureF": 49 }, { "dateFormatted": "15/12/2018", "temperatureC": 30, "summary": "Hot", "temperatureF": 85 }, { "dateFormatted": "16/12/2018", "temperatureC": -4, "summary": "Balmy", "temperatureF": 25 }] }
        ];    
        const startDateIndex = 0;

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

如有任何帮助，我们将不胜感激!

Answer 1

您的操作创建者假设状态具有 weatherForecasts 属性。它可能会在实际生产代码中具有该属性，但在您为测试目的设置假状态的测试中，没有 weatherForecasts 属性。相反，相关数据位于状态的顶层，没有命名空间。

这里有两种可能的解决方案:

一个。从操作创建者中删除对 weatherForecasts 命名空间的错误假设。这是我的首选解决方案，因为它稍微简化了一些事情。

if (startDateIndex === getState().startDateIndex) {

B.在创建状态时将命名空间添加到状态，以匹配操作创建者的现有假设。

let state = { weatherForecasts : { startDateIndex: 5, forecasts: [], isLoading: false } };