使用它自己的初始状态对 redux reducer 进行单元测试

Question

我有一个减速器，其默认初始状态定义如下：

const webReducer = (state = {
    fetched: false,
    data: {}
}, action) => {
    switch (action.type) {
        case "FETCH_DATA":
            state = {
                ...state,
                fetched: action.payload.fetched
            };

            state.data.push( action.payload.data );

            return state;
        break;
    }

    return state;
};

当我运行一个检查初始状态的测试时，它通过了：

const initialState = {
    fetched: false,
    data: {}
};

it("Should have a default initial state", () => {
    expect( webReducer( undefined, {}) ).toEqual( initialState );
})

但是，当我尝试测试向状态添加数据时，它 return 这个错误：

TypeError: state.data.push is not a function

这就是我进行测试的方式：

const object = {
    fetched: true,
    data: {
        config: {size: 10}
    }
};

expect(
    webReducer( undefined, {
        type: "FETCH_DATA", 
        payload: object
    })
).toEqual( object );

如果我之前可以通过测试就好了，为什么我现在会收到这个错误？我还尝试传递默认状态，如下所示：

expect(
    webReducer( initialState, {
        type: "FETCH_DATA", 
        payload: object
    })
).toEqual( object );

但我遇到了同样的错误。

Answer 1

您已将数据初始化为一个空对象，该对象没有推送功能。尝试用下面的替换它，测试应该可以通过。

state = {
fetched: false,
data: []

使用它自己的初始状态对 redux reducer 进行单元测试

Unit test redux reducer using it's own initial state

unit-testing

reactjs

react-redux