react hook test with mocking useSelector and useDispatch

[gloriaJun]

Version

• "react": "^16.10.2",
• "react-dom": "^16.10.2",
• "react-redux": "^7.1.1",
• "@testing-library/jest-dom": "^5.13.0",
• "@testing-library/react": "^11.2.7",
• "@testing-library/react-hooks": "^7.0.1"

Test Scenario

import { useCallback } from 'react';
import { useSelector } from 'react-redux';

// ...SKIP...

export function useAfterSignIn() {
  const { isTransferPortal, queryParams } = useSelector(appAccessPointSelector);

  const handleRouteAfterSignIn = useCallback(
    // ...SKIP...
    },
    [isTransferPortal, queryParams]
  );

  return {
    onRouteAfterSignIn: handleRouteAfterSignIn,
  };
}

Test Code

import { renderHook } from '@testing-library/react-hooks';
import * as reactRedux from 'react-redux';

import { mockWindonwLocation } from '@tests/utility';
import { history } from '@lib/history';
import { useAfterSignIn } from './useAfterSignIn';

describe('useAfterSignIn', () => {
  describe('onRouteAfterSignIn', () => {
    const useSelectorMock = jest.spyOn(reactRedux, 'useSelector');

    beforeEach(() => {
      useSelectorMock.mockClear();
    });

    it('should be redirect to bank main, if not set the prevPathname and not set url', async () => {
      useSelectorMock.mockReturnValue({
        isTransferPortal: false,
      });

      mockWindonwLocation({});

      const { result } = renderHook(() => useAfterSignIn());

      result.current.onRouteAfterSignIn();

      expect(history.location.pathname).toBe('/');
      expect(history.location.hash).toBe('');
      expect(history.location.search).toBe('');
    });
  });
});

Reference

• https://medium.com/@szpytfire/react-redux-testing-mocking-useselector-and-usedispatch-e004c3f2b2e0