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 , , etc.

Installation

1. Setup required peer dependencies: enzyme, react, react-router v4, and react-test-renderer.

2. Install via yarn or npm

``bash
$> yarn add -D enzyme-context enzyme-context-react-router-4
`

3. Add to plugins:

`javascript
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:

`javascript
import { mount } from './test-utils/enzyme'; // import the mount created with enzyme-context
import { Route } from 'react-router-dom';
import MyComponent from './MyComponent';

describe('', () => {
let wrapper;

beforeEach(() => {
wrapper = mount();
});

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

$3

#### Returns

EnzymePlugin: The plugin which can be passed to createMount/createShallow.

#### Example:

`javascript
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:

1. 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:
`javascript
const wrapper = mount(, {
routerConfig: {
initialEntries: ['/my/url'],
},
});
``