У меня есть <UserListComponent/>
который выводит один компонент <Contact/>
и список контактов, представленных <Contacts/>
.
Проблема в том, что в тесте для <UserListComponent/>
когда я пытаюсь его смонтировать, тест выдает ошибку Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
withRouter()
используется в компоненте <Contacts/>
.
Как я могу смоделировать ContactsComponent
без маршрутизатора в тесте родительского компонента?
Я нашел похожую проблему https://www.bountysource.com/issues/49297944-invariant-violation-you-should-not-use-route-or-withrouter-outside-a-router, но он описывает только ситуацию, когда компонент накрывайте самим withRouter()
, а не детей.
UserList.test.jsx
const mockResp = {
count: 2,
items: [
{
_id: 1,
name: 'User1',
email: '[email protected]',
phone: '+123456',
online: false
},
{
_id: 2,
name: 'User2',
email: '[email protected]',
phone: '+789123',
online: false
},
{
_id: 3,
name: 'User3',
email: '[email protected]',
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);