React JS - npm 测试失败，没有Router 必须位于 Router 内部

Question

运行 npm test 时出现此错误，有人知道如何修复它吗？

 FAIL  src/App.test.js (13.306s)
  × renders learn react link (2323ms)
  ● renders learn react link
    Invariant failed: You should not use <withRouter(App) /> outside a <Router>
      4 |
      5 | test('renders learn react link', () => {
    > 6 |   const { getByText } = render(<App />);
        |                         ^
      7 |   const linkElement = getByText(/learn react/i);
      8 |   expect(linkElement).toBeInTheDocument();
      9 | });

我也尝试在 app.test.js 中添加 BrowserRouter，但这没有任何作用。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
    <BrowserRouter>
            <App />
    </BrowserRouter>, document.getElementById('root'));
serviceWorker.register();

App.js 包含网站的路由，具有过渡效果和包含路由的开关。

App.js

import React from 'react';
import {GlobalStyle} from "./global.styles";
import Footer from "./components/footer/footer.component";
import {MainContainer} from "./components/common/Container.component";
import Navbar from "./components/navbar/nav/nav.component";
import {CSSTransition, TransitionGroup} from "react-transition-group";
import Particles from "react-particles-js";
import { Switch, Route } from 'react-router-dom';
import { withRouter } from "react-router";
import HomePage from "./pages/homepage/homepage.component";
import ProcessPage from "./pages/process/process.component";
import ProcessIndepth from "./pages/process/process-indepth/processIndepth.component";
import ServicePage from "./pages/service/service.component";
import AboutPage from "./pages/about/about.component";
import ContactPage from "./pages/contact/contact.component";
import Cookies from "./pages/cookies/cookies.component";
class App extends React.Component {
    constructor() {
        super();
        this.state = {
            navbarOpen: false,
            showSuccess: true,
        }
    }
    handleNavbar = () => {
        this.setState({
            navbarOpen: !this.state.navbarOpen
        });
    };
    render() {
        const {location} = this.props;
        return (
        <div>
                <div>
                    <MainContainer>
                        <GlobalStyle/>
                        <Navbar
                            navbarState={this.state.navbarOpen}
                            handleNavbar={this.handleNavbar}
                        />
                        <Route render={({location}) => (
                            <TransitionGroup>
                                <CSSTransition
                                    key={location.key}
                                    classNames="fade"
                                    timeout={800}
                                >
                                    <Switch>
                                        <Route exact path='/' component={HomePage} />
                                        <Route exact path='/proces' component={ProcessPage} />
                                        <Route exact path='/samarbejdsproces' component={ProcessIndepth} />
                                        <Route exact path='/services' component={ServicePage}/>
                                        <Route exact path='/om_os' component={AboutPage}/>
                                        <Route exact path='/kontakt' component={ContactPage}/>
                                        <Route exact path='/cookies' component={Cookies} />
                                    </Switch>
                                </CSSTransition>
                            </TransitionGroup>
                        )}
                        />
                        {location.pathname !== "/" && <Footer/>}
                    </MainContainer>
                </div>
        </div>
        );
    }
}
export default withRouter(App);

应用程序.test.js

import React from 'react';
import { render } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
  const { getByText } = render(<App />);
  const linkElement = getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});

测试的目的是用circleci部署网站。

Answer 1

这是因为无法找到带有文本的元素：/learn React/i。这可能是因为文本被多个元素分解。

所以我这样做了：

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import storeConfig from './store/storeConfig';
    import App from './App';

    const store = storeConfig();

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