Initialize react-router v3 context with enzyme-context
Usage no npm install needed!
<script type="module">
import enzymeContextReactRouter3 from 'https://cdn.skypack.dev/enzyme-context-react-router-3';
</script>
README
enzyme-context-react-router-3
Introduction
This plugin sets up the context required for react-router (v3) and exposes a history instance so that tests can manipulate the URL. With this plugin enabled, it is possible to mount all react-router components in your test, including <Link />, <Route />, etc.
import { createMount, createShallow } from 'enzyme-context';
import { routerContext } from 'enzyme-context-react-router-3';
const plugins = {
history: routerContext(),
};
export const mount = createMount(plugins);
export const shallow = createShallow(plugins);
Usage
After adding the plugin to your mount/shallow, it can be used in your tests like so:
import { mount } from './test-utils/enzyme'; // import the mount created with enzyme-context
import { Route, withRouter } from 'react-router';
import MyComponent from './MyComponent';
describe('<MyComponent />', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(<Route path="/my/path" component={MyComponent} />);
});
it('renders when active', () => {
expect(wrapper.find(MyComponent).exists()).toBe(false);
wrapper.history.push('/my/path');
wrapper.update();
expect(wrapper.find(MyComponent).exists()).toBe(true);
});
it('renders non-route components', () => {
let Component = props => <div>Path is: {props.location.pathname}</div>;
Component = withRouter(Component);
wrapper = mount(<Component />, {
routerConfig: {
entries: ['/foo/bar'],
},
});
expect(wrapper.text()).toBe('Path is: /foo/bar');
});
});
Configuration API
routerContext() => EnzymePlugin
Returns
EnzymePlugin: The plugin which can be passed to createMount/createShallow.
Example:
import { createMount, createShallow } from 'enzyme-context';
import { routerContext } from 'enzyme-context-react-router-4';
const plugins = {
history: routerContext(),
};
export const mount = createMount(plugins);
export const shallow = createShallow(plugins);
Mount/Shallow API
This plugin also allows some configuration to be passed at mount-time:
routerConfig (Object [optional]): any of the configuration options of history's createMemoryHistory(). For example, we can set the URL before our component mounts like so: