chore: modify jest config, ts-jest => 26.xx.xx, tsconfig'include add … (reduxjs#1770)

Author: myNameIsDu

jest.config.js

@@ -1,14 +1,9 @@
-const { default: tsJestPreset } = require('ts-jest')
-
 const defaults = {
-  ...tsJestPreset,
   coverageDirectory: './coverage/',
   collectCoverage: true,
   testURL: 'http://localhost',
 }
-
-const testFolderPath = (folderName) =>
-  `<rootDir>/test/${folderName}/**/*.{js,ts,tsx}`
+const testFolderPath = (folderName) => `<rootDir>/test/${folderName}/**/*.js`
 
 const NORMAL_TEST_FOLDERS = ['components', 'hooks', 'integration', 'utils']
 
@@ -18,6 +13,16 @@ const standardConfig = {
   testMatch: NORMAL_TEST_FOLDERS.map(testFolderPath),
 }
 
+const tsTestFolderPath = (folderName) =>
+  `<rootDir>/test/${folderName}/**/*.{ts,tsx}`
+
+const tsStandardConfig = {
+  ...defaults,
+  displayName: 'ReactDOM',
+  preset: 'ts-jest',
+  testMatch: NORMAL_TEST_FOLDERS.map(tsTestFolderPath),
+}
+
 const rnConfig = {
   ...defaults,
   displayName: 'React Native',
@@ -29,5 +34,5 @@ const rnConfig = {
 }
 
 module.exports = {
-  projects: [standardConfig, rnConfig],
+  projects: [tsStandardConfig, standardConfig, rnConfig],
 }

package.json

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

src/components/Provider.tsx

@@ -15,7 +15,7 @@ export interface ProviderProps<A extends Action = AnyAction> {
    * If this is used, generate own connect HOC by using connectAdvanced, supplying the same context provided to the
    * Provider. Initial value doesn't matter, as it is overwritten with the internal state of Provider.
    */
-  context?: Context<ReactReduxContextValue>
+  context?: Context<ReactReduxContextValue | null>
   children: ReactNode
 }
 

src/connect/wrapMapToProps.ts

@@ -47,7 +47,7 @@ export function wrapMapToPropsConstant(
 // A length of zero is assumed to mean mapToProps is getting args via arguments or ...args and
 // therefore not reporting its length accurately..
 export function getDependsOnOwnProps(mapToProps: MapToProps) {
-  return mapToProps?.dependsOnOwnProps
+  return mapToProps.dependsOnOwnProps
     ? Boolean(mapToProps.dependsOnOwnProps)
     : mapToProps.length !== 1
 }

src/types.ts

@@ -272,6 +272,6 @@ export type ResolveArrayThunks<TDispatchProps extends ReadonlyArray<any>> =
 export interface TypedUseSelectorHook<TState> {
   <TSelected>(
     selector: (state: TState) => TSelected,
-    equalityFn?: (left: TSelected, right: TSelected) => boolean
+    equalityFn?: EqualityFn<TSelected>
   ): TSelected
 }

test/components/hooks.spec.tsx

@@ -43,7 +43,7 @@ describe('React', () => {
       const mapStateSpy1 = jest.fn()
       const renderSpy1 = jest.fn()
 
-      let component1StateList
+      let component1StateList: number[]
 
       const component1Decorator = connect<
         Omit<RootStateType, 'byId'>,
@@ -77,23 +77,31 @@ describe('React', () => {
       const mapStateSpy2 = jest.fn()
       const renderSpy2 = jest.fn()
 
-      interface Component2PropsType {
-        mappedProp: Array<string>
+      interface Component2Tstate {
+        mappedProp: string[]
       }
       const component2Decorator = connect<
-        Component2PropsType,
+        Component2Tstate,
         unknown,
         Omit<RootStateType, 'byId'>,
         RootStateType
-      >((state, ownProps) => {
-        mapStateSpy2()
-
-        return {
-          mappedProp: ownProps.list.map((id) => state.byId[id]),
+      >(
+        (
+          state: RootStateType,
+          ownProps: Omit<RootStateType, 'byId'>
+        ): Component2Tstate => {
+          mapStateSpy2()
+
+          return {
+            mappedProp: ownProps.list.map((id) => state.byId[id]),
+          }
         }
-      })
+      )
+      interface Component2PropsType {
+        list: number[]
+      }
 
-      const component2 = (props) => {
+      const component2 = (props: Component2PropsType) => {
         renderSpy2()
 
         expect(props.list).toBe(component1StateList)

test/hooks/useDispatch.spec.tsx

@@ -7,9 +7,10 @@ import {
   createDispatchHook,
 } from '../../src/index'
 import type { ProviderProps } from '../../src/'
+import type { ReactReduxContextValue } from '../../src/components/Context'
 
-const store = createStore((c: number): number => c + 1)
-const store2 = createStore((c: number): number => c + 2)
+const store = createStore((c: number = 1): number => c + 1)
+const store2 = createStore((c: number = 1): number => c + 2)
 
 describe('React', () => {
   describe('hooks', () => {
@@ -27,7 +28,8 @@ describe('React', () => {
     })
     describe('createDispatchHook', () => {
       it("returns the correct store's dispatch function", () => {
-        const nestedContext = React.createContext(null)
+        const nestedContext =
+          React.createContext<ReactReduxContextValue | null>(null)
         const useCustomDispatch = createDispatchHook(nestedContext)
         const { result } = renderHook(() => useDispatch(), {
           // eslint-disable-next-line react/prop-types

test/hooks/useSelector.spec.tsx

@@ -11,11 +11,12 @@ import {
   connect,
   createSelectorHook,
 } from '../../src/index'
-import type { FunctionComponent } from 'react'
 import { useReduxContext } from '../../src/hooks/useReduxContext'
+import type { FunctionComponent, DispatchWithoutAction, ReactNode } from 'react'
 import type { Store, AnyAction } from 'redux'
 import type { ProviderProps, TypedUseSelectorHook } from '../../src/'
 import type { Subscription } from '../../src/utils/Subscription'
+import type { ReactReduxContextValue } from '../../src/components/Context'
 
 describe('React', () => {
   describe('hooks', () => {
@@ -24,7 +25,7 @@ describe('React', () => {
         count: number
       }
       let normalStore: Store<NormalStateType, AnyAction>
-      let renderedItems = []
+      let renderedItems: any[] = []
       type RootState = ReturnType<typeof normalStore.getState>
       let useNormalSelector: TypedUseSelectorHook<RootState> = useSelector
 
@@ -56,7 +57,8 @@ describe('React', () => {
         })
 
         it('selects the state and renders the component when the store updates', () => {
-          const selector: jest.Mock<number, [s: NormalStateType]> = jest.fn(
+          type MockParams = [NormalStateType]
+          const selector: jest.Mock<number, MockParams> = jest.fn(
             (s) => s.count
           )
 
@@ -80,7 +82,7 @@ describe('React', () => {
 
       describe('lifecycle interactions', () => {
         it('always uses the latest state', () => {
-          const store = createStore((c: number): number => c + 1, -1)
+          const store = createStore((c: number = 1): number => c + 1, -1)
 
           const Comp = () => {
             const selector = useCallback((c: number): number => c + 1, [])
@@ -106,7 +108,7 @@ describe('React', () => {
           let rootSubscription: Subscription
 
           const Parent = () => {
-            const { subscription } = useReduxContext()
+            const { subscription } = useReduxContext() as ReactReduxContextValue
             rootSubscription = subscription
             const count = useNormalSelector((s) => s.count)
             return count === 1 ? <Child /> : null
@@ -122,19 +124,19 @@ describe('React', () => {
               <Parent />
             </ProviderMock>
           )
-
+          // @ts-ignore   ts(2454)
           expect(rootSubscription.getListeners().get().length).toBe(1)
 
           normalStore.dispatch({ type: '' })
-
+          // @ts-ignore   ts(2454)
           expect(rootSubscription.getListeners().get().length).toBe(2)
         })
 
         it('unsubscribes when the component is unmounted', () => {
           let rootSubscription: Subscription
 
           const Parent = () => {
-            const { subscription } = useReduxContext()
+            const { subscription } = useReduxContext() as ReactReduxContextValue
             rootSubscription = subscription
             const count = useNormalSelector((s) => s.count)
             return count === 0 ? <Child /> : null
@@ -150,11 +152,11 @@ describe('React', () => {
               <Parent />
             </ProviderMock>
           )
-
+          // @ts-ignore   ts(2454)
           expect(rootSubscription.getListeners().get().length).toBe(2)
 
           normalStore.dispatch({ type: '' })
-
+          // @ts-ignore   ts(2454)
           expect(rootSubscription.getListeners().get().length).toBe(1)
         })
 
@@ -183,7 +185,7 @@ describe('React', () => {
       })
 
       it('works properly with memoized selector with dispatch in Child useLayoutEffect', () => {
-        const store = createStore((c: number): number => c + 1, -1)
+        const store = createStore((c: number = 1): number => c + 1, -1)
 
         const Comp = () => {
           const selector = useCallback((c: number): number => c, [])
@@ -282,7 +284,7 @@ describe('React', () => {
 
       it('uses the latest selector', () => {
         let selectorId = 0
-        let forceRender
+        let forceRender: DispatchWithoutAction
 
         const Comp = () => {
           const [, f] = useReducer((c) => c + 1, 0)
@@ -301,15 +303,19 @@ describe('React', () => {
 
         expect(renderedItems).toEqual([0])
 
-        rtl.act(forceRender)
+        rtl.act(() => {
+          forceRender()
+        })
         expect(renderedItems).toEqual([0, 1])
 
         rtl.act(() => {
           normalStore.dispatch({ type: '' })
         })
         expect(renderedItems).toEqual([0, 1])
 
-        rtl.act(forceRender)
+        rtl.act(() => {
+          forceRender()
+        })
         expect(renderedItems).toEqual([0, 1, 2])
       })
 
@@ -503,8 +509,8 @@ describe('React', () => {
     })
 
     describe('createSelectorHook', () => {
-      let defaultStore
-      let customStore
+      let defaultStore: Store
+      let customStore: Store
       type StateType = {
         count: number
       }
@@ -519,7 +525,8 @@ describe('React', () => {
       })
 
       it('subscribes to the correct store', () => {
-        const nestedContext = React.createContext(null)
+        const nestedContext =
+          React.createContext<ReactReduxContextValue | null>(null)
         const useCustomSelector = createSelectorHook(nestedContext)
         let defaultCount = null
         let customCount = null
@@ -531,7 +538,10 @@ describe('React', () => {
           defaultCount = count
           return <>{children}</>
         }
-        const DisplayCustomCount = ({ children = null }) => {
+        interface DisplayCustomCountType {
+          children: ReactNode
+        }
+        const DisplayCustomCount = ({ children }: DisplayCustomCountType) => {
           const count = useCustomSelector<StateType>(getCount)
           customCount = count
           return <>{children}</>

test/typetests/react-redux-types.typetest.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars, no-inner-declarations */
 import { Component, ReactElement } from 'react'
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
+import React from 'react'
+import ReactDOM from 'react-dom'
 import { Store, Dispatch, bindActionCreators, AnyAction } from 'redux'
 import { connect, Provider, ConnectedProps } from '../../src/index'
 import { expectType } from '../typeTestHelpers'

tsconfig.json

@@ -11,8 +11,9 @@
     "declaration": true,
     "emitDeclarationOnly": true,
     "outDir": "./es",
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "experimentalDecorators":true
   },
-  "include": ["src/**/*", "types"],
+  "include": ["src/**/*", "test/**/*", "types"],
   "exclude": ["node_modules", "dist"]
 }

types/index.d.ts

@@ -1,16 +1,4 @@
 /* eslint-disable no-unused-vars */
-declare module 'react-dom' {
-  export function unstable_batchedUpdates<A, B>(
-    callback: (a: A, b: B) => any,
-    a: A,
-    b: B
-  ): void
-  export function unstable_batchedUpdates<A>(
-    callback: (a: A) => any,
-    a: A
-  ): void
-  export function unstable_batchedUpdates(callback: () => any): void
-}
 
 declare module 'react-native' {
   export function unstable_batchedUpdates<A, B>(