首页 > 解决方案 > 在“Connect(App)”的上下文中找不到“store”。- React npm 测试期间的错误消息

问题描述

首先,我想说这个类别中问题的其他答案都无法解决我的问题。在 npm 测试期间,我收到以下错误:

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

● 渲染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 |

这是测试代码:

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

这是 App.jsx(我也尝试使用扩展名 .js 但没有区别):

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
})

导出默认连接(mapStateToProps)(App);index.js 文件如下:

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

标签: reactjstestingreduxconnect

解决方案


推荐阅读