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.

Installation

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

2. Install via yarn or npm

   $> yarn add -D enzyme-context enzyme-context-react-router-3

3. Add to plugins:

   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:

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:

   const wrapper = mount(<MyComponent />, {
     routerConfig: {
       entries: ['/my/url'],
     },
   });