笑话，酵素:不断违反:您不应该使用< Route>或在< Router>外部使用Router()

本文介绍了笑话，酵素:不断违反:您不应该使用< Route>或在< Router>外部使用Router()的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有一个<UserListComponent />，它输出一个<Contact />组件和<Contacts />表示的联系人列表.

I have a <UserListComponent /> which outputs one <Contact /> component and list of contacts presentated by <Contacts />.

问题在于，在尝试安装<UserListComponent />的测试中，测试输出错误Invariant Violation: You should not use <Route> or withRouter() outside a <Router>

The problem is that in the test for <UserListComponent /> when I try to mount it, test outputs an error Invariant Violation: You should not use <Route> or withRouter() outside a <Router>

withRouter()用于<Contacts />组件.

在父组件测试中如何在没有路由器的情况下模拟ContactsComponent?

How can I mock ContactsComponent without router in test of parent component?

我发现了一些类似的问题 www.bountysource/issues/49297944-invariant-violation-you-should-not-use-route-or-withrouter-outside-a-router 但是它仅描述组件被withRouter()本身而不是子对象覆盖的情况.

I found some similar issue www.bountysource/issues/49297944-invariant-violation-you-should-not-use-route-or-withrouter-outside-a-router but it only describes situation when component is cover by withRouter() itself, not children.

UserList.test.jsx

const mockResp = { count: 2, items: [ { _id: 1, name: 'User1', email: 'email1@gmail', phone: '+123456', online: false }, { _id: 2, name: 'User2', email: 'email2@gmail', phone: '+789123', online: false }, { _id: 3, name: 'User3', email: 'email3@gmail', phone: '+258369147', online: false } ], next: null } describe('UserList', () => { beforeEach(() => { fetch.resetMocks() }); test('should output list of users', () => { fetch.mockResponseOnce(JSON.stringify(mockResp)); const wrapper = mount(<UserListComponent user={mockResp.items[2]} />); expect(wrapper.find('.contact_small')).to.have.length(3); }); })

UserList.jsx

export class UserListComponent extends PureComponent { render() { const { users, error } = this.state; return ( <React.Fragment> <Contact userName={this.props.user.name} content={this.props.user.phone} /> {error ? <p>{error.message}</p> : <Contacts type="contactList" user={this.props.user} contacts={users} />} </React.Fragment> ); } }

Contacts.jsx

class ContactsComponent extends Component { constructor() { super(); this.state = { error: null, }; } render() { return ( <React.Fragment> <SectionTitle title="Contacts" /> <div className="contacts"> //contacts </div> </React.Fragment> ); } } export const Contacts = withRouter(ContactsComponent);

推荐答案

要测试包含<Route>和withRouter的组件(使用Jest)，您需要在测试中而不是组件中导入Router

To test a component (with Jest) that contains <Route> and withRouter you need to import Router in you test, not in your component

import { BrowserRouter as Router } from 'react-router-dom';

并像这样使用它

app = shallow( <Router> <App /> </Router>);