CODEWITHSUNDEEP
reactjsreduxjestjsnext.js
CraZyDroiD
CraZyDroiD

Reputation: 7105

could not find react-redux context value ; ensure component is wrapped in a <Provider>

I'm working on nextjs project and i'm getting the following error when i try my tests

could not find react-redux context value; please ensure the component is wrapped in a <Provider>

27 | const Home = () => {
  28 |   const classes = useStyles();
> 29 |   const dispatch = useDispatch();
     |                    ^
  30 | 
  31 |   const movies = useSelector((state: RootState) => state.movies.movies);
  32 |   const isMovieSaving = useSelector(

I'm getting this error only when using the useDispatch hook.

_app.tsx

const App = ({ Component, pageProps }) => {
  const classes = useStyles();
  return (
    <Provider store={store}>
      <ThemeProvider theme={Theme}>
        <CssBaseline />
        <Container className={classes.root}>
          <Header />
          <div className={classes.contentContainer}>
            <Component {...pageProps} />
          </div>
          <Footer links={[Instructions, Design, Swagger, Storybook]} />
        </Container>
      </ThemeProvider>
    </Provider>
  );
};

index.tsx

const Home = () => {
  const classes = useStyles();
  const dispatch = useDispatch();

  return (
    <div className={classes.container}>
      <MoviesList
        movies={movies}
        getRating={getRating}
        saveMovie={saveMovie}
        formBackgroundColor={formBackgroundColor}
      />
    </div>
  );


export default Home;

The error says that i should wrap the component with Provider. But i have already done in _app.tsx. I tried wrapping the Home component with Provider as well, but got the same result. What could be the reason for this?

Upvotes: 2

Views: 5251

Answers (1)

nima
nima

Reputation: 8915

You are probably using a configTest.js to set up some details with the test.

since your Home component is using the redux provider (or any provider), you need to set up a test provider in configTest.js. in this example I use the render method (from the react testing library) and then create another customRender function and export it, you can also set up this method with jest.

import React from 'react';
import {render} from '@testing-library/react';

import ReduxProvider from './providers/redux-provider';
import RouterProvider from './providers/router-provider';

afterAll(() => jest.clearAllMocks());

const AllTheProviders = ({children}) => {
  return (
    <ReduxProvider>
      <RouterProvider>
        {children}
      </RouterProvider>
    </ReduxProvider>
  );
};

const customRender = (ui, options) => render(ui, {wrapper: AllTheProviders, ...options});

export * from '@testing-library/react';
export * from '@testing-library/jest-dom';

export {customRender as render};

Now in your test file, you need to import render and other methods from this file instead of importing them from the testing library or jest library

import {render, fireEvent, screen} from 'configTests';

Upvotes: 1

Related Questions