enzyme-context-react-router-3

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.

Installation

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

  2. Install via yarn or npm

    gt; 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'],
      },
    });