How to unit test a redux application that uses redux-thunk - unit-testing

Question

Here is a test stub that I have written in Mocha/Chai. I can easily dispatch an action and assert that the state is equal to what I expect, but how do I validate that it followed the expected process along the way (IE the earlier tests)?
/**
* This test describes the INITIALIZE_STATE action.
* The action is asynchronous using the async/await pattern to query
* The database. The action creator returns a thunk which should in turn
* return the new state with a list of tables and their relationships with eachother
**/
describe('Initialize state', () => {
it('Should check if state is empty', () => {});
it('Should check if tables/relationships exist', () => {});
it('Should check if new tables have been added', () => {});
it('Should merge new and existing tables and relationships', () => {
// Here is where we would dispatch the INITIALIZE_STATE
// action and assert that the new state is what I expect it to be.
});
});
I haven't written any code for the actual action itself yet, because I want the code to pass these validations. Some psuedo-code might look like this
export function initializeState() {
return function(dispatch) {
let empty = store.getState().empty
let state = (empty) ? await getLastPersistedState() : store.getState()
let tables = state.tables;
let payload = tables.concat(await getNewTables(tables));
dispatch({type: 'INITIALIZE_STATE', payload});
}
}
function getLastPerisistedState() {
return mongodb.findall(state, (s) => s);
}
function getNewTables(tableFilter) {
return sql.query("select table_name from tables where table_name not in (" + tableFilter + ")");
}

Answer 1

Here is the solution that I came up with. There may be a better one, but so far no one has been able to provide one. I decided to go with a refactored set of actions and a separate store for my testing. The actions are function generators rather than using thunk. They yield out the actions that thunk will dispatch in the production code. In my test I can then dispatch those actions myself and verify that the resulting state is what I'd expect. This is exactly what thunk will do but it allows me to insert myself as the middle man rather than depending on the thunk middle-ware.
This is also super useful because it makes separating the action logic from the dispatch and state logic extremely easy, even when you are testing asynchronous flow.
For the database, I automatically generate a stub and use promises to simulate the async query. Since this project is using sequelize anyways, I just used sequelize to generate the stub.
Here is the code
_actions.js
export function *initializeState() {
//We will yield the current step so that we can test it step by step
//Should check if state is empty
yield {type: 'UPDATE_STEP', payload: 'IS_STATE_EMPTY'};
yield {type: 'UPDATE_STEP_RESULT', payload: stateIsEmpty()};
if(stateIsEmpty()) {
//todo: Implement branch logic if state is empty
}
//...
}
sequelize/_test/generate.js
async function createMockFromSql(db, sql, filename) {
let results = await db.query(sql, {type: db.Sequelize.QueryTypes.SELECT});
return new Promise((resolve, reject) => {
// Trim the results to a reasonable size. Keep it unique each time
// for more rigorous testing
console.log('trimming result set');
while (results.length > 50) {
results.splice(results.length * Math.random() | 0, 1);
}
fs.writeFile(path.resolve(__dirname, '../../sequelize/_test', filename), JSON.stringify(results, null, 2), err => {
if (err) {
console.error(err);
reject(false);
}
resolve(true);
})
})
}
test/actions.js
...
it('Should check if state is empty', () => {
let action = initializeState();
expect(action.next()).to.deep.equal({type: 'UPDATE_STEP', payload: 'IS_STATE_EMPTY'})
});