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')
);