a redux middleware to automatically generate tests for reducers through ui interaction
MIT License
NOTE YOUR STATE TREE MUST BE SERIALIZABLE
Redux test recorder is a redux middleware for automatically generating tests for your reducers based on the actions in your app. Currently I've written redux-test-recorder-react a component to provide a gui for recording tests in react but I'm hopeful recording components for other frameworks can be created in the future.
Also take a look at our latest build which currently runs a test generated using this module by taking advantage of the eval
command. For a better idea of what is going on, you can take a look at the test file here.
npm install redux-test-recorder --save-dev
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});
export const store = createStore(reducer, applyMiddleware(record.middleware));
export const recordProps = record.props;
Then, if you are using with React you can install redux-test-recorder-react and import the recordProps exported by the instantiation of the middleware and pass those into the record component.
import {store, recordProps } from './store';
import TestRecorder from 'redux-test-recorder-react';
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.
actionSubset
prop explained next). To get to a -nth level child use dots, as in: api.login.errors
.stateKey
to test a single reducer.===
. This argument can also be a string. This is useful if you want to call a function you will include in your test file, since calling external functions will not properly stringify that external function.tape
. Currently supports tape
, ava
, and mocha
, jest
, and redux-ava
. You can also optionally supply a function to this argument to generate your own tests. Will receive state, actions, imports, reducer, equalityFunction
as arguments and expects return type to be a string containing your test contents.If you're not satisfied with the built in testing interface or would like to experiment with something different, it's relatively straightforward. The return of the exported function is an object with two keys middleware
and props
. The middleware
key contains, well, the middleware, props
contains information for accessing the current state of the tests. These include startRecord
, stopRecord
, which are functions that start and stop test recording. createNewTest
which creates and then returns a new test, hideTest
, which resets all values to initial value, and most importantly listen
, a function that takes a function and calls listeners
any time any values related to recording status or generated tests is changed. More documentation on this coming soon.
You can take a look at what creating your own interface looks like here - here for what this looks like for the tape implementation.