Refactor/test hooks (#1767)

Author: myNameIsDu

jest.config.js

@@ -1,17 +1,21 @@
+const { default: tsJestPreset } = require('ts-jest')
+
 const defaults = {
+  ...tsJestPreset,
   coverageDirectory: './coverage/',
   collectCoverage: true,
-  testURL: 'http://localhost'
+  testURL: 'http://localhost',
 }
 
-const testFolderPath = folderName => `<rootDir>/test/${folderName}/**/*.js`
+const testFolderPath = (folderName) =>
+  `<rootDir>/test/${folderName}/**/*.{js,ts,tsx}`
 
 const NORMAL_TEST_FOLDERS = ['components', 'hooks', 'integration', 'utils']
 
 const standardConfig = {
   ...defaults,
   displayName: 'ReactDOM',
-  testMatch: NORMAL_TEST_FOLDERS.map(testFolderPath)
+  testMatch: NORMAL_TEST_FOLDERS.map(testFolderPath),
 }
 
 const rnConfig = {
@@ -20,10 +24,10 @@ const rnConfig = {
   testMatch: [testFolderPath('react-native')],
   preset: 'react-native',
   transform: {
-    '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js'
-  }
+    '^.+\\.js$': '<rootDir>/node_modules/react-native/jest/preprocessor.js',
+  },
 }
 
 module.exports = {
-  projects: [standardConfig, rnConfig]
+  projects: [standardConfig, rnConfig],
 }

package.json

@@ -109,6 +109,7 @@
     "rimraf": "^3.0.2",
     "rollup": "^2.32.1",
     "rollup-plugin-terser": "^7.0.2",
+    "ts-jest": "^27.0.3",
     "typescript": "^4.3.4"
   },
   "browserify": {

src/hooks/useReduxContext.ts

@@ -1,5 +1,6 @@
 import { useContext } from 'react'
 import { ReactReduxContext } from '../components/Context'
+import type { ReactReduxContextValue } from '../components/Context'
 
 /**
  * A hook to access the value of the `ReactReduxContext`. This is a low-level
@@ -17,7 +18,7 @@ import { ReactReduxContext } from '../components/Context'
  *   return <div>{store.getState()}</div>
  * }
  */
-export function useReduxContext() {
+export function useReduxContext(): ReactReduxContextValue | null {
   const contextValue = useContext(ReactReduxContext)
 
   if (process.env.NODE_ENV !== 'production' && !contextValue) {

test/hooks/useDispatch.spec.js renamed to test/hooks/useDispatch.spec.tsx

@@ -6,16 +6,20 @@ import {
   useDispatch,
   createDispatchHook,
 } from '../../src/index'
+import type { ProviderProps } from '../../src/'
 
-const store = createStore((c) => c + 1)
-const store2 = createStore((c) => c + 2)
+const store = createStore((c: number): number => c + 1)
+const store2 = createStore((c: number): number => c + 2)
 
 describe('React', () => {
   describe('hooks', () => {
     describe('useDispatch', () => {
       it("returns the store's dispatch function", () => {
+        type PropsType = Omit<ProviderProps, 'store'>
         const { result } = renderHook(() => useDispatch(), {
-          wrapper: (props) => <ProviderMock {...props} store={store} />,
+          wrapper: (props: PropsType) => (
+            <ProviderMock {...props} store={store} />
+          ),
         })
 
         expect(result.current).toBe(store.dispatch)
@@ -27,7 +31,7 @@ describe('React', () => {
         const useCustomDispatch = createDispatchHook(nestedContext)
         const { result } = renderHook(() => useDispatch(), {
           // eslint-disable-next-line react/prop-types
-          wrapper: ({ children, ...props }) => (
+          wrapper: ({ children, ...props }: ProviderProps) => (
             <ProviderMock {...props} store={store}>
               <ProviderMock context={nestedContext} store={store2}>
                 {children}
@@ -40,7 +44,7 @@ describe('React', () => {
 
         const { result: result2 } = renderHook(() => useCustomDispatch(), {
           // eslint-disable-next-line react/prop-types
-          wrapper: ({ children, ...props }) => (
+          wrapper: ({ children, ...props }: ProviderProps) => (
             <ProviderMock {...props} store={store}>
               <ProviderMock context={nestedContext} store={store2}>
                 {children}