Búsqueda de sitios web

Typescript, Pruebas Unitarias: Tipado correcto para Despachar un Thunk con store.dispatch de redux-mock-store

¿Hay alguna manera de despachar correctamente un Thunk desde un store creado con redux-mock-store? En este momento me veo obligado a usar una afirmación de tipo any

store.dispatch<any>(getCommissions());

Como dispatch espera proporcionar una Acción simple

[ts]
Argument of type '(dispatch: ThunkDispatch<IRootState, undefined, 
AnyAction>, getState: () => IRootState) => void' is not assignable to parameter of type 'AnyAction'.
Property 'type' is missing in type '(dispatch: ThunkDispatch<IRootState, undefined, AnyAction>, getState: () => IRootState) => void'.

Fragmento de código para getCommisions()

export function getCommissions() {
  return (dispatch: ThunkDispatch<IRootState, undefined, AnyAction>, getState: () => IRootState) => { ... }

Respuesta #1

La función createMockStore, que es la exportación por defecto de redux-mock-store, acepta tipos genéricos <S, DispatchExts> donde S es la definición de tu estado de Redux, y DispatchExts es una unión de (o único) firmas adicionales de Dispatch para cualquier middleware de Redux añadido.

Entonces, la forma de configurar esto es importar ThunkDispatch desde redux-thunk, que acepta sus propios argumentos genéricos de <State, ExtraArgument, Action> y pasarlos como el argumento DispatchExts a createMockStore.

Aquí hay un ejemplo abreviado:

import { AnyAction } from 'redux'; // Or your own Action definition
import createMockStore from 'redux-mock-store';
import thunk, { ThunkDispatch } from 'redux-thunk';

import { ApplicationState } from '../your/definitions';

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

const middleware = [thunk];
const mockStore = createMockStore<ApplicationState, DispatchExts>(middleware);

const store = mockStore();

¡Espero que eso te ayude!

Mis versiones actuales: redux 4.0.0 redux-thunk 2.3.0 redux-mock-store 1.5.3 typescript 2.9.2

Definición de ThunkDispatch https://github.com/reduxjs/redux-thunk/blob/master/index.d.ts

Definición de createMockStore https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/redux-mock-store/index.d.ts

Respuesta #2

Para el uso de configureMockStore, la solución es casi exactamente la misma que la respuesta de @nickpassarella.

import configureMockStore from 'redux-mock-store';
import thunk, { ThunkDispatch } from 'redux-thunk';
import { MyState, MyActions } from './my-types';

type DispatchExts = ThunkDispatch<MyState, undefined, MyActions>;

const middlewares = [thunk];
const mockStore = configureMockStore<MyState, DispatchExts>(middlewares);

const store = mockStore();

Ambos ejemplos funcionan con redux 4.0.1 redux-thunk 2.3.0 redux-mock-store 1.5.3 y typescript 3.5.3

Artículos relacionados