Mock basename in Jest / Enzyme

Question

I have a history class that looks like:

import createHistory from 'history/createBrowserHistory';

export default createHistory({
  basename: '/admin/',
});

When writing / running any unit tests against a class that is connected to the store and rendered using a router, I am getting the following warning in tests:

console.error node_modules/warning/warning.js:51
  Warning: You are attempting to use a basename on a page whose URL path does not begin with the basename. Expected path "blank" to begin with "/admin".

An example test would be as follows:

import React from 'react';
import { MemoryRouter as Router } from 'react-router-dom';
import { mount } from 'enzyme';
import configureStore from 'redux-mock-store';
import TenantListContainer from '../../../src/containers/TenantList';
import TenantList from '../../../src/containers/TenantList/TenantList';

const mockStore = configureStore();
const store = mockStore({
  tenants: {
    tenants: ['foo'],
    loading: true,
  },
});


describe('TenantListContainer', () => {
  it('should render the TenantList components', () => {
    const wrapper = mount(
      <Router>
        <TenantListContainer store={store} />
      </Router>
    );
    expect(wrapper.find(<TenantList />)).toBeTruthy();
  });
});

How can I mock out this history prop, using the MemoryRouter? I have tried passing in the history object, however I am then told this prop is ignored by the memory router.

Answer 1

You can always mock out the url from within your Jest config.

My approach generally is including this within my package.json

In your case, I would expect this to be something like -

 "jest": {
    "testURL": "http://some-domain.tld/admin"
  }

You can then change this on a per test basis by including the following in your beforeEach() block

window.history.pushState({}, 'Foo Title', '/admin/foo');