React Testing Library Invariant失败：您不应在<Router>外使用<Route>

问题描述

我正在使用React Testing Library测试我的组件是否成功使用Redux渲染。我无法让我的实用程序组件通过renderWithRedux测试。这是我的App组件。

function App() {
return (
    <>
        <Router>
            <NavBar />
            <div className="container">
                <Switch>
                    <Route exact path='/' component={Home}/>
                    <AuthRoute exact path='/login' component={Login} />
                    <AuthRoute exact path='/signup' component={Signup} />
                    <Route exact path='/users/:handle' component={UserProfile} />
                    <Route exact path='/users/:handle/post/:postId' component={UserProfile} />
                </Switch>
            </div>
        </Router>
    </>
);

}

这是我的AuthRoute实用程序组件。

const AuthRoute = ({ component: Component,authenticated,...rest }) => (
      // if authenticated,redirect to homepage,otherwise redirect to signup or login
        <Route
        {...rest}
        render={(props) =>
          authenticated === true ? <Redirect to='/' /> : <Component {...props} />
        }
      />
    );

AuthRoute.test.js

const renderWithRedux = () => render(
    <Provider store={myStore}>
        <AuthRoute />
    </Provider>
);

it('renders with Redux',() => {
    const {} = renderWithRedux(<AuthRoute />);
});

我尝试了Invariant failed: You should not use <Route> outside a <Router>的解决方案，但无济于事。感谢您的帮助，谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）