本文介绍了Jest, Enzyme: Invariant Violation: 你不应该使用 <Route>或 withRouter() 在 <Router> 之外的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个
输出一个
组件和由 呈现的联系人列表;代码>.
问题是,在对
的测试中,当我尝试挂载它时,测试输出错误 Invariant Violation: You should not use 或 withRouter() 在 <Router>
之外withRouter()
用于
组件.
如何在没有路由器的情况下模拟 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 = {数:2,项目: [{_id: 1,名称:'用户1',电子邮件:'[email protected]',电话:'+123456',在线:假的},{_id: 2,名称:'用户2',电子邮件:'[email protected]',电话:'+789123',在线:假的},{_id: 3,名称:'用户3',电子邮件:'[email protected]',电话:'+258369147',在线:假的}],下一个: 空}描述('用户列表',()=> {beforeEach(() => {fetch.resetMocks()});test('应该输出用户列表', () => {fetch.mockResponseOnce(JSON.stringify(mockResp));const wrapper = mount(<UserListComponent user={mockResp.items[2]}/>);期望(wrapper.find('.contact_small')).to.have.length(3);});})
UserList.jsx
export class UserListComponent extends PureComponent {使成为() {const { 用户,错误 } = this.state;返回 (<React.Fragment><联系方式用户名={this.props.user.name}内容={this.props.user.phone}/>{错误 ?<p>{error.message}</p>: <Contacts type="contactList" user={this.props.user} contacts={users}/>}</React.Fragment>);}}
Contacts.jsx
class ContactsComponent 扩展组件 {构造函数(){极好的();this.state = {错误:空,};}使成为() {返回 (<React.Fragment><SectionTitle title="联系人"/><div className="联系人">//联系人
</React.Fragment>);}}export const Contacts = withRouter(ContactsComponent);
解决方案
要测试包含
和 withRouter
的组件(使用 Jest),您需要在您的测试中导入路由器,而不是在您的组件中
import { BrowserRouter as Router } from 'react-router-dom';
并像这样使用它
app = 浅(<路由器><应用程序/></路由器>);
I have a <UserListComponent />
which outputs one <Contact />
component and list of contacts presentated by <Contacts />
.
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()
is used in <Contacts />
component.
How can I mock ContactsComponent
without router in test of parent component?
I found some similar issue https://www.bountysource.com/issues/49297944-invariant-violation-you-should-not-use-route-or-withrouter-outside-a-routerbut 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: '[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);
解决方案
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';
and use it like this
app = shallow(
<Router>
<App />
</Router>);
这篇关于Jest, Enzyme: Invariant Violation: 你不应该使用 <Route>或 withRouter() 在 <Router> 之外的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!