Thunk middleware not working when using mock store in a shallow rendered component

[pendar747]

I'm having an issue with the thunk middleware not working when I use the mock store through enzyme example:

const mapDispatchToProps = dispatch => ({
  register: data => dispatch(register(data))
    .then(() => dispatch(login({
      username: data.email,
      password: data.password
    }))),
  redirectToAccountPage: () => dispatch(push('/my-account'))
});

// my test
register.default.callsFake((data) => {
  expect(data).toMatchSnapshot();
  done();
  return dispatch => dispatch(Promise.resolve({ type: 'register' }));
});
component.find('[name="lastName"]')
  .simulate("change", { target: { value: "Freddy", name: 'lastName' }})
component.find('[name="firstName"]')
  .simulate("change", { target: { value: "Fredo", name: 'firstName' }})
component.find('form').simulate('submit');

And I'm setting up the mock store like this:

const createStore = configureStore([thunk]);

const initialState = {
  user: {
    isLoggedIn: false
  }
};
const store = createStore(initialState);
const component = shallow(<Register store={store} accountType="personal"/>).dive().dive();

the register action creator is fired when the form is submitted which should work while configuring the store with the thunk middleware, but I get this error:

Error: Actions must be plain objects. Use custom middleware for async actions.
    at dispatch (/home/pendar/avance-account-ui/node_modules/redux-mock-store/lib/index.js:41:19)
    at /home/pendar/avance-account-ui/node_modules/redux-thunk/lib/index.js:14:16

Any idea what the problem is?

[Fazatholomew]

I'm having an issue with the thunk middleware not working when I use the mock store through enzyme example:

const mapDispatchToProps = dispatch => ({
  register: data => dispatch(register(data))
    .then(() => dispatch(login({
      username: data.email,
      password: data.password
    }))),
  redirectToAccountPage: () => dispatch(push('/my-account'))
});

// my test
register.default.callsFake((data) => {
  expect(data).toMatchSnapshot();
  done();
  return dispatch => dispatch(Promise.resolve({ type: 'register' }));
});
component.find('[name="lastName"]')
  .simulate("change", { target: { value: "Freddy", name: 'lastName' }})
component.find('[name="firstName"]')
  .simulate("change", { target: { value: "Fredo", name: 'firstName' }})
component.find('form').simulate('submit');

And I'm setting up the mock store like this:

const createStore = configureStore([thunk]);

const initialState = {
  user: {
    isLoggedIn: false
  }
};
const store = createStore(initialState);
const component = shallow(<Register store={store} accountType="personal"/>).dive().dive();

the register action creator is fired when the form is submitted which should work while configuring the store with the thunk middleware, but I get this error:

Error: Actions must be plain objects. Use custom middleware for async actions.
    at dispatch (/home/pendar/avance-account-ui/node_modules/redux-mock-store/lib/index.js:41:19)
    at /home/pendar/avance-account-ui/node_modules/redux-thunk/lib/index.js:14:16

Any idea what the problem is?

I experience the same. When testing my action with jest.

[saulwiggin]

I'm getting a similiar error with jest testing of mockStore Actions must be plain objects. Use custom middleware for async actions.

  54 |     const finalState = { 'componentUnmounted': true};
  55 |     const store = mockStore( initialState );
> 56 |     store.dispatch(action.DASHBOARD_MOUNTED).then(() => {
     |           ^
  57 |       expect(store.getActions()).toEqual(finalState);
  58 |     });
  59 |   });

[MuFa117]

Got into the same issue, for me solution was to follow redux-mock-store Async actions documentation: https://github.com/reduxjs/redux-mock-store#asynchronous-actions

Bottom line, to add thunk when configuring mock store for tests.