Testing a React hook with a redux store

useMyAwesomeHook.specs.tsx

import React from 'react';
import { renderHook } from '@testing-library/react-hooks';
import stateFactory from 'jest/stateFactory';
import configureMockStore from 'redux-mock-store';
import { Provider } from 'react-redux';
import { Store, AnyAction } from 'redux';

import { initialState as initialPaginationState } from '../../store/pagination/reducer';
import { useMyAwesomeHook } from '../useMyAwesomeHook';

// Custom wrapper to provide any store to the provider
function getWrapper(store: Store<any, AnyAction>): React.FC {
    return ({ children }: { children?: React.ReactNode }) => <Provider store={store}>{children}</Provider>;
}

describe('The useMyAwesomeHook hook', () => {
    it('should return a good result', () => {
        // creates mock store
        const store = configureMockStore()(
            stateFactory({
                // custom initial states go here
                // (should be based on initial state from your reducers)
                pagination: {
                    { ...initialPaginationState },
                    page: 1   
                },
            }),
        );
  
        // get wrapper
        const wrapper = getWrapper(store);
        
        // render the hook with the custom wrapper
        const { result } = renderHook(() => useLinkParameters(), { wrapper });
        
        // test result
        expect(result.current).toBe('/?page=1');
    });
});

THANK YOU!!! <3

Thank you!!!

Thank you!! 🚀