Add hooks.withTypes.test.tsx to test runtime behavior

Author: aryaemami59

test/hooks/hooks.withTypes.test.tsx

@@ -0,0 +1,76 @@
+import type { Action, ThunkAction } from '@reduxjs/toolkit'
+import { configureStore, createAsyncThunk, createSlice } from '@reduxjs/toolkit'
+import { useDispatch, useSelector, useStore } from '../../src'
+
+export interface CounterState {
+  counter: number
+}
+
+const initialState: CounterState = {
+  counter: 0,
+}
+
+export const counterSlice = createSlice({
+  name: 'counter',
+  initialState,
+  reducers: {
+    increment(state) {
+      state.counter++
+    },
+  },
+})
+
+export function fetchCount(amount = 1) {
+  return new Promise<{ data: number }>((resolve) =>
+    setTimeout(() => resolve({ data: amount }), 500)
+  )
+}
+
+export const incrementAsync = createAsyncThunk(
+  'counter/fetchCount',
+  async (amount: number) => {
+    const response = await fetchCount(amount)
+    // The value we return becomes the `fulfilled` action payload
+    return response.data
+  }
+)
+
+const { increment } = counterSlice.actions
+
+const counterStore = configureStore({
+  reducer: counterSlice.reducer,
+})
+
+type AppStore = typeof counterStore
+type AppDispatch = typeof counterStore.dispatch
+type RootState = ReturnType<typeof counterStore.getState>
+type AppThunk<ThunkReturnType = void> = ThunkAction<
+  ThunkReturnType,
+  RootState,
+  unknown,
+  Action
+>
+
+describe('useSelector.withTypes<RootState>()', () => {
+  test('should return useSelector', () => {
+    const useAppSelector = useSelector.withTypes<RootState>()
+
+    expect(useAppSelector).toBe(useSelector)
+  })
+})
+
+describe('useDispatch.withTypes<AppDispatch>()', () => {
+  test('should return useDispatch', () => {
+    const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+
+    expect(useAppDispatch).toBe(useDispatch)
+  })
+})
+
+describe('useStore.withTypes<AppStore>()', () => {
+  test('should return useStore', () => {
+    const useAppStore = useStore.withTypes<AppStore>()
+
+    expect(useAppStore).toBe(useStore)
+  })
+})

test/hooks/useSelector.spec.tsx

@@ -1055,12 +1055,6 @@ describe('React', () => {
           })
         })
       })
-
-      test('useSelector.withTypes', () => {
-        const useAppSelector = useSelector.withTypes<RootState>()
-
-        expect(useAppSelector).toBe(useSelector)
-      })
     })
 
     describe('createSelectorHook', () => {

test/typetests/hooks.withTypes.test-d.tsx

@@ -5,10 +5,10 @@ import type { AppDispatch, AppStore, RootState } from './counterApp'
 import { incrementAsync } from './counterApp'
 
 function preTypedHooksSetupWithTypes() {
-  const useAppDispatch = useDispatch.withTypes<AppDispatch>()
-
   const useAppSelector = useSelector.withTypes<RootState>()
 
+  const useAppDispatch = useDispatch.withTypes<AppDispatch>()
+
   const useAppStore = useStore.withTypes<AppStore>()
 
   function CounterComponent() {