Модульное тестирование. Редуктор не меняет состояние после отправки действия

Question

Я пытаюсь выполнить простой тест редуктора. новый StartLoading(); отправляется, это должно установить для 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 свойство с новым значением.

Если вы проверите этот пример в документации, вы увидите, что состояние определено с левой стороны, а затем новые свойства с правой стороны (или внизу, если они находятся в нескольких строках)