JSPM – redux-test-recorder@0.2.2

Package Exports

redux-test-recorder

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (redux-test-recorder) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Redux Test Recorder

NOTE EXPERIMENTAL, API MAY CHANGE DRAMATICALLY NOTE YOUR STATE TREE MUST BE SERIALIZABLE

Redux test recorder is a redux middleware + included component for automagically generating tests for your reducers based on the actions in your app.

Click here for a demo

Install

npm install redux-test-recorder --save-dev

Use

First set up your store utilizing the exported middleware from redux-test-recorder. Export the props included with redux-test-recorder at this time as well.

import reduxRecord from 'redux-test-recorder';
const reducer = (state = initState, { type, payload }) => {
  let newState;
  switch (type) {
    case 'INCREMENT':
      newState = state + 1;
      break;
    case 'DECREMENT':
      newState = state - 1;
      break;
    default:
      newState = state;
  }
  return newState;
}

const record = reduxRecord(reducer);

const createStoreWithMiddleware = applyMiddleware(record.middleware)(createStore);
export const store = createStoreWithMiddleware(reducer);
export const recordProps = record.props;

Then at the component level include redux-test-recorder at the root.

import {store, recordProps } from './store';
import { TestRecorder } from 'redux-test-recorder';
const Counter = ({count, dispatch}) => {
  return (
    <div>
      <button onClick={() => dispatch(increment())}>+</button>
      <h1>{count}</h1>
      <button onClick={() => dispatch(decrement())}>-</button>
    </div>
  );
}

const ConnectedCounter = connect(state => {
  return {count: state};
})(Counter);
const Root = () => {
  return (
    <div>
      <Provider store={store}>
        <div><ConnectedCounter /><TestRecorder {...recordProps} /></div>
      </Provider>
    </div>;
};

This will allow you to generate tests on your reducer with a record button in the bottom right corner.

Args

reducer - the root reducer of your redux app, used in the generated test.
includeReducer - a boolean value, if true, a stringified version of your reducer will be incuded in your generated test, if false, a note to import reducer for testing will be added. defaults to true.
equality - a function used to determine if the reducer returned correct state. Receives result of the reducer call and nextState returned during the flow of the application (note, this api is in flux).