rt2zz / redux-persist

persist and rehydrate a redux store
MIT License
12.97k stars 867 forks source link

Vitest - The slice reducer for key "reducer name" returned undefined during initialization #1466

Open Makler1337 opened 9 months ago

Makler1337 commented 9 months ago

I'm using nextJS with redux-toolkit, everything looks fine and works fine, I test some unit tests with vitest and it also works as intended (I don't see any relationship or connection of these tests with redux itself) but whenever I add persist (even simple console log with it inside) to some of files, tests are failing and gives me this error:

stderr | unknown test
redux-persist failed to create sync storage. falling back to noop storage.

The slice reducer for key "configurator" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined

example of code that works just fine and one that causing this issue:

export const LogoutButton = () => {
  return (
    <button onClick={() => console.log('test')}>logout</button>
  );
};

export const LogoutButton = () => {
  return (
    <button onClick={() => console.log(persistor)}>logout</button>
  );
};

and this is how my redux persist is configured:

import { configureStore } from '@reduxjs/toolkit';
import {
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist';

import { configuratorReducer } from './configurator';
import { userReducer } from './user';
import { PERSISTED_STORE_KEY_CONFIGURATOR, PERSISTED_STORE_KEY_USER } from 'configs';
import storage from 'redux-persist/lib/storage';

const persistConfigConfigurator = {
  key: PERSISTED_STORE_KEY_CONFIGURATOR,
  version: 1,
  storage,
};

const persistConfigUser = {
  key: PERSISTED_STORE_KEY_USER,
  version: 1,
  storage,
};

const persistedReducerConfigurator = persistReducer(persistConfigConfigurator, configuratorReducer);
const persistedReducerUser = persistReducer(persistConfigUser, userReducer);

export const store = configureStore({
  reducer: { 
    configurator: persistedReducerConfigurator,
    user: persistedReducerUser,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      },
    }),
});

export type RootState = ReturnType<typeof store.getState>;
export type TypedDispatch = typeof store.dispatch;

"vitest": "^0.34.5", "react-redux": "^7.2.8", "redux-persist": "^6.0.0", "next": "^13.1.6",

Did anyone had similar issue? If you need any more info about describing the issue / provide more code examples, please let me know it's my first ever post where I ask for any help.

I tried to follow these posts: https://github.com/vercel/next.js/discussions/15687 https://stackoverflow.com/questions/57781527/how-to-solve-console-error-redux-persist-failed-to-create-sync-storage-falli but I think these are more related to real issue of redux-persist failed to create sync storage. falling back to noop storage in real app not in test cases.