This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

test-container

test-component

The set of utils to simplify functional redux testing and make them more meaningful.

Redux proposes to write highly isolated tests for each redux entity, like action creators, reducers, state mappers, dispatcher mappers, and so on. Even though highly isolated tests are pretty fast to run and does cost almost nothing for your feedback loop, it would make sense to go a bit functional in your tests when you want to manage the growing integration complexity in your app and provide the better tooling for ongoing refactoring.

Example

Let's take a deeper look on the official redux example for writing tests.

We won't write any separate test for action creators, reducers, or component.

To test the next app:

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {createStore, Action} from 'redux';

export type Todo = string;

export interface AppState {
  todos: Todo[];
}

export const addTodo = (todo: Todo): Action => ({
  type: 'ADD_TODO',
  todo,
});

export const initState: AppState = {
  todos: [],
};

export const reducer = (state: AppState = initState, action: Action): AppState => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: state.todos.concat(action.todo)
      };

    default:
      return state;
  }
};

@connect()
export default class App extends React.PureComponent<AppState, {}> {
  public render() {
    const {todos} = this.props;

    return (
      <div itemScope>
        <ul itemProp="todos">
          {todos.map(todo =>
            <li key={todo} itemScope>
              <span itemProp="item">{todo}</span>
            </li>
          )}
        </ul>
      </div>
    );
  }
}

ReactDOM.render(
  <Provider store={createStore(reducer)}>
    <App />
  </Provider>,
  document.getElementById('root'),
);

We'll need something like:

import * as React from 'react';
import {createStore, applyMiddleware, Middleware, Store} from 'redux';
import testRedux, {setStore, setWrapper} from 'test-redux';
import {matchesObject, dispatches} from 'test-redux/jest';
import App, {reducer} from './app';

setStroe((...midddleware: Middleware[]) =>
  createStore(reducer, applyMiddleware(...middleware)));

setWrapper((el: React.ReactElement<any>, store: Store<any>): React.ReactElement<any> =>
  <Provider store={store}>
    {el}
  </Provider>);

describe('App', () => {
  it('should render default state of the app', () =>
    testRedux(<App />, [
      matchesMicrodata({
        todos: [],
      }),
    ]));
  
  it('should render a list of added items', () =>
    testRedux(<App />, [
      dispatches(addTodo('First')),
      dispatches(addTodo('Second')),
      dispatches(addTodo('Third')),
      matchesMicrodata({
        todos: [
          {item: 'First'},
          {item: 'Second'},
          {item: 'Third'},
        ]
      }),
    ]));
});

More examples you can find in the examples directory.

API

TestInstance

interface TestInstance {
  wrapper: enzyme.ReactWrapper<any, any>;
  store: redux.Store<any>;
  actionHistory: redux.Action[];
}

TestStep

type TestStep = (instance: TestInstance) => Promise<void | {}>

testRedux<E extends React.ReactElement<any>>(el: E, steps: TestStep[]) => Promise<E>

import testRedux from 'test-redux';

Takes element as a first arg and a sequence of test steps as a second arg.

setStore<S>((...midddleware: redux.Middleware[]) => redux.Store<S>)

import {setStore} from 'test-redux';

setWrapper<S>(el: React.ReactElement<any>, store: Store<S>): React.ReactElement<any>

import {setWrapper} from 'test-redux';

matchesObject

import {matchesObject} from 'test-redux/jest';

dispatches

import {dispatches} from 'test-redux/jest';