Jest, Enzyme: Invariant Violation: You should not use or withRouter() outside a

Question

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: 'email1@gmail.com',
      phone: '+123456',
      online: false
    },
    {
      _id: 2,
      name: 'User2',
      email: 'email2@gmail.com',
      phone: '+789123',
      online: false
    },
    {
      _id: 3,
      name: 'User3',
      email: 'email3@gmail.com',
      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);

score 123 · Answer 1 · edited Sep 12 '18 at 07:31

123

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>);

edited Sep 12 '18 at 07:31

Moti Korets

3,458
2
23
33

answered May 25 '18 at 13:18

Edhar Dowbak

1,758
1
8
11

4

Invariant Violation: Could not find "store" in either the context or props of "Connect(Header)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(Header)". – Anupam Maurya Dec 21 '18 at 09:00
4

@AnupamMaurya use `MemoryRouter` instead of `BrowserRouter` and it will work. – kaxi1993 Apr 22 '19 at 08:35
i am getting same error as @AnupamMaurya and i have used `memory router` – shorif2000 Oct 28 '19 at 14:18
Does this really work with `shallow`? I think `mount` needs to be used – Hiroki Oct 18 '20 at 09:47

Steve Banton · Answer 2 · 2018-09-06T14:11:12.743

Utility Function To Wrap Mount With Context

Wrapping mount with Router in tests works, but there are situations where you don't want Router to be the parent component in your mount. Therefore I'm currently injecting context into mount using a wrapper function:

import { BrowserRouter } from 'react-router-dom';
import Enzyme, { shallow, mount } from 'enzyme';

import { shape } from 'prop-types';

// Instantiate router context
const router = {
  history: new BrowserRouter().history,
  route: {
    location: {},
    match: {},
  },
};

const createContext = () => ({
  context: { router },
  childContextTypes: { router: shape({}) },
});

export function mountWrap(node) {
  return mount(node, createContext());
}

export function shallowWrap(node) {
  return shallow(node, createContext());
}

This could be in a file called, say contextWrap.js, in a test helpers directory.

Example describe block:

import React from 'react';
import { TableC } from '../../src/tablec';
import { mountWrap, shallowWrap } from '../testhelp/contextWrap';
import { expectedProps } from './mockdata'

describe('Table', () => {
  let props;
  let component;
  const wrappedShallow = () => shallowWrap(<TableC {...props} />);

  const wrappedMount = () => mountWrap(<TableC {...props} />);

  beforeEach(() => {
    props = {
      query: {
        data: tableData,
        refetch: jest.fn(),
      },
    };
    if (component) component.unmount();
  });

  test('should render with mock data in snapshot', () => {
    const wrapper = wrappedShallow();
    expect(wrapper).toMatchSnapshot();
  });

  test('should call a DeepTable with correct props', () => {
    const wrapper = wrappedMount();
    expect(wrapper.find('DeepTable').props()).toEqual(expectedProps);
  });

});

You can also use this pattern to wrap subcomponents in other types of context, for example if you are using react-intl, material-ui or your own context types.

Where is the 'mount' function coming from in the first file? — Mauricio Poveda, Sep 05 '18 at 19:20
It is enzyme's mount - I believe I'm setting it up globally with a jestSetup file before invoking tests that performs `import Enzyme, { shallow, mount } from 'enzyme';` and sets `global.mount = mount;`. Added to answer for clarification, thanks very much. — Steve Banton, Sep 06 '18 at 14:08
This should be the accepted answer. I think it is a lot cleaner then using the accepted answers approach. — Ben Lime, Oct 17 '18 at 10:19
@BenLime I agree, this solution allows using `wrapper.setProps`, `wrapper.state`, `wrapper.setState` with no further modification. — worldsayshi, May 10 '19 at 13:42
@SteveBanton still am getting the same issue after using this can u pls help with this — tamilmani, Apr 21 '20 at 20:38

score 12 · Answer 3 · answered Oct 10 '18 at 09:34

12

You need to wrap the App with a BrowserRouter or an equivalent, see the below example of simple test case a component App that uses React Router

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

it("renders without crashing", () => {
  const div = document.createElement("div");
  ReactDOM.render(
<BrowserRouter>
  <App />
</BrowserRouter>,
div
  );
  ReactDOM.unmountComponentAtNode(div);
})

answered Oct 10 '18 at 09:34

Taha Azzabi

1,578
17
24

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. – Francis Rodrigues Nov 29 '18 at 19:50
Invariant Violation: Could not find "store" in either the context or props of "Connect(BaseLayout)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(BaseLayout)". – Anupam Maurya Dec 21 '18 at 08:13

score 8 · Answer 4 · answered Apr 05 '19 at 12:18

i had same problem, and first comment helped me, but there are a lot of code i have better way how to resolve this problem. See my solution below:

    import React from 'react';
import { shallow, mount } from 'enzyme';
import SisuSignIn from '../../../components/Sisu/SisuSignIn.js';
import { MemoryRouter } from 'react-router-dom';

const Container = SisuSignIn;

let wrapper;

beforeEach(() => {
  wrapper = shallow(<Container />);
});

describe('SisuSignIn', () => {
  it('renders correctly', () => {
    expect(wrapper).toMatchSnapshot();
  });
  it('should render one <h1>', () => {
    const wrapper = mount(
      <MemoryRouter>
        <SisuSignIn auth={{ loading: false }} />
      </MemoryRouter>
    );
    expect(wrapper.find('div').length).toBe(12);
  });
});

This comment should be higher up as it works. – Moe Singh Dec 22 '20 at 15:16 — Moe Singh, Dec 22 '20 at 15:16

score 6 · Answer 5 · answered Aug 04 '19 at 05:29

A keeps the history of your "URL" in memory (does not read or write to the address bar). Useful in tests and non-browser environments like React Native.

I got similar error solution is wrapping component with the help of Memory router

import { MemoryRouter } from 'react-router'

<MemoryRouter>
  <App/>
</MemoryRouter>

a_m_dev · Answer 6 · 2020-09-25T20:57:36.210

actually i used to create snapshot tests for my components with react-test-renderer and i faced with this issue and what i did i just wrap my component with a BrowserRouter that ships with react-router-dom, you can do so like below:

import React from 'react'
import { BrowserRouter } from 'react-router-dom'
import renderer from "react-test-renderer";


import UserListComponent from './whatever'



test('some description', () => {
  
  const props = { ... }

  const jsx = (
    <BrowserRouter>
      <UserListComponent {...props} />
    </BrowserRouter>
  )

  const tree = renderer.create(jsx).toJSON()
  expect(tree).toMatchSnapshot()

})

totaly recommend useing a test factory for this kind of situations if you want to test it for multiple times!

score 0 · Answer 7 · answered Apr 21 '21 at 11:19

Add the Router tag to render it.

import * as React from "react";
import { render, mount } from 'enzyme';
import { BrowserRouter as Router } from "react-router-dom"
import CategoriesToBag from "../CategoriesToBag";



describe('Testing CategoriesToBag Component', () => {
    test("check if heading is correct", () => {
        const defaultValue = "Amazing Categories To Bag";
        const wrapper = render(<Router><CategoriesToBag /></Router>);
        expect(wrapper.find('.textBannerTitle').text()).toMatch(/Categories To Bag/);
        expect(wrapper.find('.textBannerTitle').text()).not.toMatch(/Wrong Match/);
        expect(wrapper.find('.textBannerTitle').text()).toBe(defaultValue);
    });

});

You should be good to go.

Jest, Enzyme: Invariant Violation: You should not use or withRouter() outside a

7 Answers7

Utility Function To Wrap Mount With Context

Example describe block:

Linked

Related