reactjs - 使用异步 redux-thunk 操作进行存储更改 typescript 的功能测试

Question

我在 React 中使用 typescript 编写了功能测试，以便在获取帖子的异步操作后测试正确的存储行为。
我用带有测试存储的文件创建了单独的实用程序:

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

然后我编写了如下的测试实现:

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);
    });
});

一切似乎都没问题，除了一行: await store.dispatch(fetchPosts());
有一个 typescript 错误:
TS2345:“ThunkAction”类型的参数不可分配给“Action”类型的参数。 “ThunkAction”类型缺少“ActionGetUser”类型中的以下属性:类型、负载

链接到项目的 repo : https://github.com/pirx1988/react-store-testing/tree/develop
带有测试的文件路径 :/src/integrationTests/index.test.ts
我该如何处理？我创建了一个带有中间件的商店 redux-thunk 但 dispatch 无法理解 async thunk fetchPosts 在这里采取行动，并期望对普通对象采取行动。

Answer 1

您可以使用以下方法修复它:

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