Functional test with typescript of store change with async redux-thunk action

Question

I have crated functional tests in React with typescript in order to test correct store behavior after async action of getting post.

I had created separate utility with file with testing store:

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

Then I wrote te tests inmplementation like below:

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

Everything seems to be ok with exception with line: await store.dispatch(fetchPosts());

There is an typescript error: TS2345: Argument of type 'ThunkAction' is not assignable to parameter of type 'Action'. Type 'ThunkAction' is missing the following properties from type 'ActionGetUser': type, payload

Link to repo with project: https://github.com/pirx1988/react-store-testing/tree/develop

Path to file with test: /src/integrationTests/index.test.ts

How can I deal with it? I've created a store with middleware redux-thunk but dispatch can't understand async thunk fetchPosts action here and expect Action with plain object.

Did you try a type cast ? typescripttutorial.net/typescript-tutorial/type-casting — GregMit
– GregMit, Commented Jul 19, 2021 at 13:13
What casting do you mean? I did something like: fetchPosts() as any. But tha't not satisfied solution for me. Do you have any other idea? — Krzysztof Michalski
– Krzysztof Michalski, Commented Jul 19, 2021 at 13:19
With the code sample you gave us I can't really look more into it, could you create a Codesandbox so I can see the full code ? fechPosts() apparently return ThunkAction type and store.dispatch() expecting an Action type — GregMit
– GregMit, Commented Jul 19, 2021 at 13:26
@GregMit, here is my repository code: github.com/pirx1988/react-store-testing/tree/develop You can find test implementation under the path: /src/integrationTests/index.test.ts — Krzysztof Michalski
– Krzysztof Michalski, Commented Jul 19, 2021 at 13:37

g_od · Accepted Answer · 2021-07-19 13:44:12Z

3

You can fix it using :

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

answered Jul 19, 2021 at 13:44

g_od

1266 bronze badges

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

1 Comment

Krzysztof Michalski Over a year ago

Thanks a lot. I was convinced that after adding thunk middleware it will work.

Collectives™ on Stack Overflow

Functional test with typescript of store change with async redux-thunk action

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related