'JEST test of React/Redux reducer from createSlice return underfined
I have faced some sort a tricky situation. Currently app operates well without visible bugs. When I lunch the simlpelest test of checking reducer from createSlice it is running into the TypeError: Cannot read properties of undefined. And it is the same for 3 reducer of 4 in combinedReducer. But when I lounch the same test for the last reducer it is passed. After two crasy days of surch and delibarate reading of docs and checking my code again and again I came to conclusion that I overestimate my ability to cope with it and ask you for the help or advise or idea where and what should be checked. Currently code in the frame/shape of what Redux is usking for.
The questions is follow:
- Why during test of reducer it returnes underfined eventhought initilState have been provided?
- How to solve it?
- Why one of the reducers behave in the right way according to the test?
Detailes:
CombinedReducers
import { combineReducers } from '@reduxjs/toolkit';
import { NameSpace } from '../const';
import { dataFavorites } from './data-favorites/data-favorites';
import { dataOffers } from './data-offers/data-offers';
import { dataProperty } from './data-property/data-property';
import { dataUser } from './data-user/data-user';
export const reducerRoot = combineReducers({
[NameSpace.DataOffers]: dataOffers.reducer,
[NameSpace.DataProperty]: dataProperty.reducer,
[NameSpace.DataUser]: dataUser.reducer,
[NameSpace.DataFavorites]: dataFavorites.reducer,
});
Slice number 1
const initialState: DataOffers = {
listOffers: [],
currentCity: Cities.Paris,
sortType: SortingLabel.Popular,
listOffersForCity: [],
errorOffers: null,
loadingOffersStatus: LoadingStatus.Idle,
};
export const dataOffers = createSlice({
name: NameSpace.DataOffers,
initialState,
reducers: {
listOffers: (state, action) => {
state.listOffers = action.payload;
},
currentCity: (state, action) => {
state.currentCity = action.payload;
},
// (the rest of code) etc..
},
extraReducers: (builder) => {
builder
.addCase(fetchOffersAction.pending, (state, action) => {
state.loadingOffersStatus = LoadingStatus.Loading;
})
// (the rest of code) etc..
});
},
});
Slice number 2
const initialState: DataUser = {
userInformation: null,
authorizationStatus: AuthorizationStatus.Unknown,
loadingUserStatus: LoadingStatus.Idle,
errorUser: null,
};
export const dataUser = createSlice({
name: NameSpace.DataUser,
initialState,
reducers: {
requireAuthorization: (state, action) => {
state.authorizationStatus = action.payload;
},
userInformation: (state, action) => {
state.userInformation = action.payload;
},
setErrorUser: (state, action) => {
state.errorUser = action.payload;
},
setLoadingUserStatus: (state, action) => {
state.loadingUserStatus = action.payload;
},
},
});
Test number 1
const initialState: DataOffers = {
listOffers: [],
currentCity: Cities.Paris,
sortType: SortingLabel.Popular,
listOffersForCity: [],
errorOffers: null,
loadingOffersStatus: LoadingStatus.Idle,
};
describe('Reducer: dataOffers', () => {
it('should return initial state with unknown action', () => {
expect(dataOffers.reducer(void 0, ConstantForMocks.UnknownAction))
.toEqual(initialState);
});
});
Test number 2
const initialState = {
userInformation: null,
authorizationStatus: AuthorizationStatus.Unknown,
loadingUserStatus: LoadingStatus.Idle,
errorUser: null,
};
describe('Reducer: dataUser', () => {
it('should return initial state with unknown action', () => {
expect(dataUser.reducer(void 0, ConstantForMocks.UnknownAction))
.toEqual(initialState);
});
});
Result of the test 1
FAIL src/store/data-offers/data-offers.test.ts
● Test suite failed to run
TypeError: Cannot read properties of undefined (reading 'reducer')
7 |
8 | export const reducerRoot = combineReducers({
> 9 | [NameSpace.DataOffers]: dataOffers.reducer,
| ^
10 | [NameSpace.DataProperty]: dataProperty.reducer,
11 | [NameSpace.DataUser]: dataUser.reducer,
12 | [NameSpace.DataFavorites]: dataFavorites.reducer,
at Object.<anonymous> (src/store/reducer-root.ts:9:38)
at Object.<anonymous> (src/store/index.ts:4:1)
at Object.<anonymous> (src/services/error-handle.ts:4:1)
at Object.<anonymous> (src/store/data-offers/data-offers.ts:7:1)
Result of the test 2
PASS src/store/data-user/data-user.test.ts
Reducer: dataUser
√ should return initial state with unknown action (2 ms)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
