reactjs - Funktionel test med TypeScript af butiksændring med asynkron redux-thunk-handling

Jeg har oprettet funktionelle tests i React med TypeScript for at teste korrekt opførsel af store efter asynkron handling med at hente post.

Jeg havde oprettet et separat hjælpeprogram med fil til test af butikken:

export const testStore = (initialState: State={posts: []}) => {
    const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore)
    return createStoreWithMiddleware(rootReducer, initialState);
}

Så skrev jeg testimplementeringen som nedenfor:

import {fetchPosts} from '../actions'
import axios, {AxiosResponse} from "axios";
import  configureStore from 'redux-mock-store'
jest.mock('axios')
const mockedAxios = axios as jest.Mocked<typeof axios>;
import expectedPosts from "../__mocks__/expectedPosts";
import State from "../state";
import reduxThunk, { ThunkDispatch } from "redux-thunk";
import Action from "../actions/types";
import {testStore} from "../Utils";



type DispatchExts = ThunkDispatch<State, void, Action>
const middlewares = [reduxThunk];
const mockStore = configureStore<State, DispatchExts>(middlewares);

describe('fetchPosts action', () => {

    it('Store is updated correctly', async () => {

        const mockedResponse: AxiosResponse = {
            data: expectedPosts,
            status: 200,
            statusText: 'OK',
            headers: {},
            config: {}
        }
        mockedAxios.get.mockResolvedValueOnce(mockedResponse);
        const store = testStore({posts: []});
        await store.dispatch(fetchPosts());
        const newState = store.getState();
        expect(newState.posts).toEqual(mockedResponse.data);
        expect(newState.posts).not.toBe(mockedResponse.data);
    });
});

Alt ser ud til at være i orden med undtagelse af linjen: await store.dispatch(fetchPosts());

Der er en TypeScript-fejl: TS2345: Argumentet af typen 'ThunkAction' kan ikke tildeles parameteren af typen 'Action'. Typen 'ThunkAction' mangler følgende egenskaber fra typen 'ActionGetUser': type, payload

Link til repository med projekt: https://github.com/pirx1988/react-store-testing/tree/develop

Sti til fil med test: /src/integrationTests/index.test.ts

Hvordan kan jeg håndtere det? Jeg har oprettet en butik med middleware redux-thunk, men dispatch kan ikke forstå async thunk fetchPosts handling her og forventer en handling med almindeligt objekt.

Svar #1

Du kan rette det ved at bruge :

await (store.dispatch as ThunkDispatch<State, unknown, Actions>)(fetchPosts());

Relaterede artikler