Initialize react-router v4 context with enzyme-context
Usage no npm install needed!
<script type="module">
import enzymeContextReactRouter4 from 'https://cdn.skypack.dev/enzyme-context-react-router-4';
</script>
README
enzyme-context-react-router-4
Introduction
This plugin sets up the context required for react-router (v4) 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-4';
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 } from 'react-router-dom';
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);
});
});
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: