Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Makler1337 opened this issue Feb 6, 2024 · 0 comments

Comments

@Makler1337
Copy link

Makler1337 commented Feb 6, 2024

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:
vercel/next.js#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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant