单元测试。 Reducer 在调度 action 后不会改变状态

Question

我正在尝试执行简单的减速器测试。新的开始加载（）；被分派这应该将 isLoading 设置为 true。不幸的是它显示： 预期 $.isLoading = false 等于 true。

没什么特别的。这是测试的样子：

   it('should set isLoading to true', () => {
        const isLoading = true;

        const action = new StartLoading();
        const newState = uiReducers(initialState, action);

        const expectedState = { ...initialState, isLoading };

        expect(newState).toEqual(expectedState);
    })

和减速器：

export interface UIState {
    isLoading: boolean;
}

export const initialState: UIState = {
    isLoading: false
};

export function uiReducers(state = initialState, action: UIActions) {
    switch (action.type) {
        case UIActionTypes.START_LOADING: {
            console.log('stt')
            return {
                isLoading: true,
                ...state
            };
        }
        case UIActionTypes.STOP_LOADING: {
            return {
                isLoading: false,
                ...state
            };
        }
        default:
            return {
                ...state
            }
    }

}

Answer 1

我相信您遇到的问题是由于 object spread operator 上元素的顺序造成的。

您的 initialState 有 isLoading = false 并且您将其设置在对象赋值的右侧（通过将 ...state 作为运算符的第二部分）。意思是，它将始终覆盖您尝试设置的 isLoading 。你应该试试

case UIActionTypes.START_LOADING: {
            console.log('stt')
            return {
                ...state
                isLoading: true,
            };
        }

通过这种方式，您告诉操作员使用 state 作为原始对象并使用新值更改 isLoading 属性。

如果您在文档中查看此 example，您将看到状态在左侧定义，然后在右侧定义新属性（如果它们在多行中，则在底部定义） )

单元测试。 Reducer 在调度 action 后不会改变状态

Unit testing. Reducer does not change state after dispatching action

jasmine

karma-runner

angular

ngrx-reducers