TypeScript, react testing missing type in AnyAction

Question

I'm having this error:

TS2345: Argument of type '(dispatch: Dispatch) => Promise<void>' is not assignable to parameter of
type 'AnyAction'.   Property 'type' is missing in type '(dispatch: Dispatch) => Promise<void>' but
required in type 'AnyAction'. type' is declared here* :

* The code of the declaration is:

export interface Action<T = any> {
  type: T
}

AnyAction extends Action.

This is my code on the test:

import configureStore from 'redux-mock-store';
import reduxThunk from 'redux-thunk';
// some code, then in the test I have:

const mockStore = configureStore([reduxThunk]);
const store = mockStore({});

store.dispatch(signIn()); //here I have the error

The definition of signIn is:

export const signIn = () =>
  async (dispatch: Dispatch): Promise<void> => {
    dispatch({
      type: SIGN_IN_REQUEST
    });
  };

Any hint or idea on how to fix it?

tmhao2005 · Accepted Answer · 2020-11-11 04:22:34Z

2

configureStore allows us to pass arguments to express dispatch extensions so in order to make it work with redux-thunk we have to specify ThunkDispatch as argument as following:

import { ThunkDispatch } from 'redux-thunk';

// your app state
interface AppState {}

// you can even express more params for `ThunkDispatch`
const mockStore = configureMockStore<AppState, ThunkDispatch<AppState, any, any>>([])

answered Nov 11, 2020 at 4:22

tmhao2005

17.7k4 gold badges46 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pmiranda · Accepted Answer · 2020-11-11 04:30:06Z

0

As tmho2005 said, I did that by reading his answer and another similar thread. This is my code in case anyone wants it:

// only relevant code for the question
import { AnyAction } from 'redux';
import configureStore from 'redux-mock-store';
import reduxThunk, { ThunkDispatch } from 'redux-thunk';

import { AuthState } from '../../../types'; // that's the definition of my app state

type DispatchExts = ThunkDispatch<AuthState, void, AnyAction>;

// And the code for mys tests:

const mockStore = configureStore<AuthState, DispatchExts>([reduxThunk]);
const store = mockStore(defaultState);

await store.dispatch(signIn({
  username: 'foo',
  password: 'bar'
}));

answered Nov 11, 2020 at 4:30

pmiranda

8,57718 gold badges96 silver badges186 bronze badges

Collectives™ on Stack Overflow

TypeScript, react testing missing type in AnyAction

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related