I have a React application with a Jest test suite. The application uses redux and the test suite uses redux-mock-store. I am using the react-thunk middleware to delay dispatching actions, since the application needs to sync data with a remote Firebase database. I would like my test suite to verify some condition after dispatching an action to Redux, like this:
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
// This is my custom async action generator.
import { asyncAction } from './some/path';
const createMockStore = configureMockStore([thunk]);
test("Test", (done) => {
const store = createMockStore({});
const data = { ... };
store.dispatch(asyncAction(data)).then(() => {
expect(someCondition);
done();
});
});
The test uses the done handler returned by Jest to wait until the promise returned by store.dispatch completes. However, the promise is never executed, the test enters an infinite loop, and Jest fails with this exception:
Assertion failed: new_time >= loop->time, file c:\ws\deps\uv\src\win\core.c, line 309
error Command failed with exit code 3221226505.
At first I thought there was a problem with the promise returned by my custom async action generator, but notice how it is returning a promise from Firebase (look at the inner return statement, the outer return statement is the function dispatched by redux-thunk):
import database from '../firebase/firebase';
export const asyncAction = (data = {}) => {
return (dispatch) => {
return database.ref('someCollection').push(data).then((ref) => {
dispatch({ type: 'SOME_TYPE', id: ref.key, ...data });
});
};
};
Then I thought maybe there's something wrong with how I set up Firebase, but I've verified that both the application and the test suite are saving data successfully. Here is the Firebase configuration:
import * as firebase from 'firebase/app';
import 'firebase/database';
firebase.initializeApp({ ... });
const database = firebase.database();
export { database as default };
Then I thought maybe there's something wrong with Redux or the redux-thunk middleware, but I've verified that the application is saving data successfully. Here is my Redux configuration:
import { applyMiddleware, createStore, combineReducers, compose } from 'redux';
import thunk from 'redux-thunk';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export default () => {
const reducer = combineReducers({ ... });
const enhancer = composeEnhancers(applyMiddleware(thunk));
return createStore(reducer, enhancer);
};
That all seems fine to me. I can't determine what is causing Jest to enter an infinite loop. Thanks in advance for your help.