Naively Programmable Module

    enzyme-context-react-router-3
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

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

    Install

    npm i enzyme-context-react-router-3

    DownloadsWeekly Downloads

    214

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    9.23 kB

    Total Files

    10

    Last publish

    Collaborators

    • jkillian
    • minznerjosh