Jest, Enzyme: Invariant Violation: 你不应该使用 <Route>或 withRouter() 在 <Router> 之外 [英] Jest, Enzyme: Invariant Violation: You should not use <Route> or withRouter() outside a <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'，电子邮件:'[e-mail]'，电话:'+123456'，在线:假的},{_id: 2,名称:'用户2'，电子邮件:'[e-mail]'，电话:'+789123'，在线:假的},{_id: 3,名称:'用户3'，电子邮件:'[e-mail]'，电话:'[phone]'，在线:假的}],下一个: 空}描述('用户列表'，()=> {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-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: '[e-mail]',
      phone: '+123456',
      online: false
    },
    {
      _id: 2,
      name: 'User2',
      email: '[e-mail]',
      phone: '+789123',
      online: false
    },
    {
      _id: 3,
      name: 'User3',
      email: '[e-mail]',
      phone: '[phone]',
      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> 之外的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！