I'm currently working on setting up a redux provider for Jest testing in my react app. To achieve this, I believe I need to implement the following code snippet:
import {ReactNode} from 'react'
import {Provider} from 'react-redux'
import {store} from "../redux/reducer/store";
type PropsWithOptionalChildren<P = unknown> = P & { children?: ReactNode };
type RootState = ReturnType<typeof store>
interface ReduxProviderProps extends PropsWithChildren {
store: RootState,
}
const ReduxProvider = ({children, store}: ReduxProviderProps) => <Provider store={store}>{children}</Provider>
export default ReduxProvider
This setup can then be used as shown below:
test("...", () => {
const store = configureStore();
const wrapper = ({ children }) => (
<ReduxProvider reduxStore={store}>{children}</ReduxProvider>
);
...
});
However, I am encountering an issue with the following line of code:
type RootState = ReturnType<typeof store>
The type [...] does not meet the constraint (...args: any) => any The type [...] does not match the signature (...args: any): any
This error seems to be related to the store variable
export const store = configureStore({
reducer: persistedReducer,
devTools: process.env.NODE_ENV !== 'production',
middleware: getDefaultMiddleware =>
getDefaultMiddleware({
serializableCheck: false
}).concat(apiSlice.middleware),
});
In addition, here is some more context:
export const rootReducer = combineReducers({
a: aReducer,
b: bReducer,
[apiSlice.reducerPath]: apiSlice.reducer,
})
const config = getPersistConfig({
key: 'root',
storage,
blacklist: ['a'],
rootReducer
})
const persistedReducer = persistReducer(config, rootReducer)
What would be the best approach to solve this compiler error?