enzyme-context

Enzyme Context is a pluggable library which simplifies the process of testing components that rely on react context.

Basic Usage

test-utils/enzyme.ts

import { createMount, createShallow } from 'enzyme-context';
import { reduxContext } from 'enzyme-context-redux';
import { routerContext } from 'enzyme-context-react-router-4';
import { createStore } from 'redux';
import reducer from './reducer'; // this is _your_ app's main reducer

const plugins = {
  store: reduxContext({
    createStore: () => createStore(reducer),
  }),
  history: routerContext(),
};

export const mount = createMount(plugins);
export const shallow = createShallow(plugins);

MyComponent.spec.tsx

import { mount } from '../test-utils/enzyme'; // import from the module defined above
import MyComponent from './MyComponent';

// this example uses jest, but that isn't required!
describe('MyComponent', () => {
  let component;
  let store;
  let history;

  beforeEach(() => {
    // mount() returns an object with the mounted EnzymeWrapper component and each of the specified plugins.
    // In this example, it returns:
    //   - component: the mounted EnzymeWrapper
    //   - store: provided by the reduxContext plugin, a redux store
    //   - history: provided by the routerContext plugin, a history object for URL manipulation
    ({ component, store, history } = mount(<MyComponent />));
  });

  it('responds to redux state changes', () => {
    store.dispatch({ type: 'SOME_ACTION' });
    component.update();
    expect(component.text()).toBe('...');
  });

  it('responds to location changes', () => {
    history.push('/my/new/url');
    component.update();
    expect(component.text()).toBe('...');
  });
});

Official Plugins

Enzyme Context maintains a few official plugins for some popular react libraries:

• enzyme-context-redux for react-redux
• enzyme-context-react-router-3 for react-router (v3)
• enzyme-context-react-router-4 for react-router (v4)
• enzyme-context-apollo for react-apollo