enzyme-context-redux

Initialize redux context with enzyme-context

Usage no npm install needed!

<script type="module">
  import enzymeContextRedux from 'https://cdn.skypack.dev/enzyme-context-redux';
</script>

README

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

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