Could not find "store" in the context of "Connect(App)". - Error message during React npm test

Viewed 152

First of all, I want to say that none of the other answers to the questions in this category were able to resolve my issue. During the npm test, I get the following error:

FAIL src/App.test.js × renders App (74 ms)

● renders App

**Could not find "store" in the context of "Connect(App)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(App) in connect options.**

   6 | test('renders App', () => {
   7 |    const div = document.createElement('div');

8 | ReactDOM.render(, div); | ^ 9 | ReactDOM.unmountComponentAtNode(div); 10 | }); 11 |

This is the test code:

import React from 'react';
import '@testing-library/jest-dom';
import App from './App';
import * as ReactDOM from "react-dom";

test('renders App', () => {
   const div = document.createElement('div');
   ReactDOM.render(<App />, div);
   ReactDOM.unmountComponentAtNode(div);
});

This is the App.jsx (I also tried with the extension .js but no difference):

import React from 'react';
import './App.css';
import {Switch, Route, Redirect} from 'react-router-dom';
import Header from "./components/header/header.component";
import HomePage from "./components/homepage/homepage.component";
import Categories from "./components/categories/categories.component";
import Jokes from "./components/jokes/jokes.component";
import Search from "./components/search/search.component";
import SignIn from "./components/sign-in/sign-in.component";
import {connect} from "react-redux";

class App extends React.Component {
    render() {
        const {currentUser} = this.props;
        return (
            <div>
                <Header/>
                <Switch>
                    <Route exact path='/' render={() => <HomePage/>}/>
                    <Route path='/categories' render={() => <Categories/>}/>
                    <Route path='/jokes' render={() => <Jokes/>}/>
                    <Route path='/search' render={() => <Search/>}/>
                    <Route
                        exact
                        path='/sign-in'
                        render={() =>
                            currentUser
                                ? <Redirect to='/'/>
                                : <SignIn/>}
                    />
                </Switch>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    currentUser: state.user.currentUser
})

export default connect(mapStateToProps)(App); The index.js file is as follows:

import React from 'react';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";
import {Provider} from "react-redux";
import store from "./redux/store";
import * as ReactDOM from "react-dom";

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <React.StrictMode>
                <App/>
            </React.StrictMode>
        </BrowserRouter>
    </Provider>,
    document.getElementById('root')
);
0 Answers
Related