enzyme-context-redux

Introduction

This plugin sets up react-redux context to test components that are connect()ed to redux.

Installation

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

2. Install via yarn or npm

   $> yarn add -D enzyme-context enzyme-context-redux

3. Add to plugins:

   import { createMount, createShallow } from 'enzyme-context';
   import { reduxContext } from 'enzyme-context-redux';
   import { createStore } from 'redux';
   import reducer from './reducer';
   
   const plugins = {
     store: reduxContext({ createStore: () => createStore(reducer) }),
   };
   
   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 MyComponent from './MyComponent';

describe('<MyComponent />', () => {
  let wrapper;

  beforeEach(() => {
    wrapper = mount(<MyComponent />);
  });

  it('responds to state updates', () => {
    wrapper.store.dispatch({ type: 'MY_ACTION' });
    wrapper.update();
    expect(wrapper.text()).toBe('...');
  });
});

Configuration API

reduxContext(options) => EnzymePlugin

Arguments

1. options (Object):

   • options.createStore (() => Store): a function which must return a redux store

Returns

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

Example:

import { createMount, createShallow } from 'enzyme-context';
import { reduxContext } from 'enzyme-context-redux';
import { createStore } from 'redux';
import reducer from './reducer';

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

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. initialActions (Action[] [optional]): an array of initial actions to be dispatched before the component is mounted. Useful to get the redux state into a desired form before the component initializes.
   • Example:

     const wrapper = mount(<MyComponent />, {
       initialActions: [{ type: 'MY_ACTION' }],
     });