Merge pull request #2129 from aryaemami59/migrate-typetests-to-vitest

Author: markerikson

.eslintrc.json

@@ -33,6 +33,7 @@
         "eslint:recommended",
         "plugin:import/recommended",
         "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
         "plugin:@typescript-eslint/recommended"
       ],
       "rules": {
@@ -56,7 +57,7 @@
     },
     {
       "files": ["**/test/**/*.{ts,tsx}"],
-      "parserOptions": { "project": "./test/tsconfig.test.json" }
+      "parserOptions": { "project": true }
     }
   ]
 }

.github/workflows/test.yml

@@ -1,15 +1,10 @@
 name: Tests
 
-on:
-  push:
-    branches: [master]
-  pull_request:
-    branches: [master]
-  workflow_dispatch:
+on: [push, pull_request, workflow_dispatch]
 
 jobs:
   build:
-    name: Test Suite
+    name: Build and run test Suite
     runs-on: ubuntu-latest
 
     steps:
@@ -63,12 +58,24 @@ jobs:
           node-version: ${{ matrix.node }}
           cache: 'yarn'
 
+      - name: Download build artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: package
+          path: .
+
       - name: Install deps
         run: yarn install
 
       - name: Install TypeScript ${{ matrix.ts }}
         run: yarn add typescript@${{ matrix.ts }}
 
+      - name: Install build artifact
+        run: yarn add ./package.tgz
+
+      - name: Erase path aliases
+        run: sed -i -e /@remap-prod-remove-line/d ./tsconfig.base.json ./vitest.config.mts
+
       - name: Test types
         run: |
           yarn tsc --version
@@ -219,3 +226,42 @@ jobs:
 
       - name: Build example
         run: yarn build
+
+  test-dist:
+    name: Run local tests against build artifact
+    needs: [build]
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        node: ['20.x']
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Use node ${{ matrix.node }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+          cache: 'yarn'
+
+      - name: Install deps
+        run: yarn install
+
+      - name: Download build artifact
+        uses: actions/download-artifact@v4
+        with:
+          name: package
+          path: .
+
+      - name: Check folder contents
+        run: ls -lah
+
+      - name: Install build artifact
+        run: yarn add ./package.tgz
+
+      - name: Erase path aliases
+        run: sed -i -e /@remap-prod-remove-line/d ./tsconfig.base.json ./vitest.config.mts
+
+      - name: Run local tests against the build artifact
+        run: yarn test

.gitignore

@@ -32,3 +32,6 @@ website/translated_docs
 website/build/
 website/node_modules
 website/i18n/*
+
+tsconfig.vitest-temp.json
+

package.json

@@ -36,17 +36,17 @@
     "dist"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "yarn clean && tsup",
     "clean": "rimraf lib dist es coverage",
     "api-types": "api-extractor run --local",
     "format": "prettier --write \"{src,test}/**/*.{js,ts,tsx}\" \"docs/**/*.md\"",
     "lint": "eslint src test",
     "lint:fix": "eslint src test --fix",
     "prepare": "yarn clean && yarn build",
     "pretest": "yarn lint",
-    "test": "vitest --run",
+    "test": "vitest --run --typecheck",
     "test:watch": "vitest --watch",
-    "type-tests": "yarn tsc -p test/typetests/tsconfig.json",
+    "type-tests": "tsc --noEmit -p tsconfig.test.json",
     "coverage": "codecov"
   },
   "peerDependencies": {
@@ -104,8 +104,8 @@
     "redux": "^5.0.0",
     "rimraf": "^3.0.2",
     "tsup": "^7.0.0",
-    "typescript": "^5.4.2",
-    "vitest": "^1.2.1"
+    "typescript": "^5.4.5",
+    "vitest": "^1.6.0"
   },
   "packageManager": "[email protected]"
 }

src/components/Provider.tsx

@@ -91,7 +91,6 @@ function Provider<A extends Action<string> = UnknownAction, S = unknown>({
 
   const Context = context || ReactReduxContext
 
-  // @ts-ignore 'AnyAction' is assignable to the constraint of type 'A', but 'A' could be instantiated with a different subtype
   return <Context.Provider value={contextValue}>{children}</Context.Provider>
 }
 

src/components/connect.tsx

@@ -519,7 +519,6 @@ function connect<
       WrappedComponent,
       // @ts-ignore
       initMapStateToProps,
-      // @ts-ignore
       initMapDispatchToProps,
       initMergeProps,
       areStatesEqual,

src/hooks/useSelector.ts

@@ -142,7 +142,7 @@ export function createSelectorHook(
       ? useDefaultReduxContext
       : createReduxContextHook(context)
 
-  const useSelector = <TState, Selected extends unknown>(
+  const useSelector = <TState, Selected>(
     selector: (state: TState) => Selected,
     equalityFnOrOptions:
       | EqualityFn<NoInfer<Selected>>

src/index-rsc.ts

@@ -10,25 +10,25 @@ const _check2: typeof rsc = {} as typeof normal
 
 // -------------------------------------------------------------------------------------
 
-function throwNotSupportedError(
+const throwNotSupportedError = ((
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ...args: any[]
-): any {
+): any => {
   throw new Error(
     'This function is not supported in React Server Components. Please only use this export in a Client Component.',
   )
-}
+}) as any
 
 export {
-  throwNotSupportedError as batch,
   throwNotSupportedError as Provider,
+  throwNotSupportedError as batch,
   throwNotSupportedError as connect,
-  throwNotSupportedError as useSelector,
-  throwNotSupportedError as useDispatch,
-  throwNotSupportedError as useStore,
   throwNotSupportedError as createDispatchHook,
   throwNotSupportedError as createSelectorHook,
   throwNotSupportedError as createStoreHook,
+  throwNotSupportedError as useDispatch,
+  throwNotSupportedError as useSelector,
+  throwNotSupportedError as useStore,
 }
 export const ReactReduxContext = {} as any
 export { default as shallowEqual } from './utils/shallowEqual'

src/utils/react.ts

@@ -1,7 +1,6 @@
-import * as ReactOriginal from 'react'
 import type * as ReactNamespace from 'react'
+import * as ReactOriginal from 'react'
 
 export const React: typeof ReactNamespace =
   // prettier-ignore
-  // @ts-ignore
   'default' in ReactOriginal ? ReactOriginal['default'] : ReactOriginal as any

test/components/Provider.spec.tsx

@@ -3,10 +3,10 @@
 import * as rtl from '@testing-library/react'
 import type { Dispatch, JSX } from 'react'
 import React, { Component } from 'react'
+import type { ReactReduxContextValue } from 'react-redux'
+import { Provider, ReactReduxContext, connect } from 'react-redux'
 import type { Store } from 'redux'
 import { createStore } from 'redux'
-import type { ReactReduxContextValue } from '../../src'
-import { Provider, ReactReduxContext, connect } from '../../src/index'
 
 import * as ReactDOM from 'react-dom'
 

test/components/connect.spec.tsx

@@ -1,8 +1,10 @@
 /*eslint-disable react/prop-types*/
 
 import * as rtl from '@testing-library/react'
-import type { Dispatch, ElementType, MouseEvent, ReactNode, JSX } from 'react'
+import type { Dispatch, ElementType, JSX, MouseEvent, ReactNode } from 'react'
 import React, { Component } from 'react'
+import type { ReactReduxContextValue } from 'react-redux'
+import { Provider as ProviderMock, connect } from 'react-redux'
 import type {
   Action,
   AnyAction,
@@ -12,8 +14,6 @@ import type {
   UnknownAction,
 } from 'redux'
 import { applyMiddleware, createStore } from 'redux'
-import type { ReactReduxContextValue } from '../../src/index'
-import { Provider as ProviderMock, connect } from '../../src/index'
 
 const IS_REACT_18 = React.version.startsWith('18')
 

test/components/hooks.spec.tsx

@@ -2,9 +2,9 @@
 
 import * as rtl from '@testing-library/react'
 import React from 'react'
+import { Provider as ProviderMock, connect } from 'react-redux'
 import type { AnyAction } from 'redux'
 import { createStore } from 'redux'
-import { Provider as ProviderMock, connect } from '../../src/index'
 
 const IS_REACT_18 = React.version.startsWith('18')
 

test/hooks/hooks.withTypes.test.tsx

@@ -1,6 +1,6 @@
 import type { Action, ThunkAction } from '@reduxjs/toolkit'
 import { configureStore, createAsyncThunk, createSlice } from '@reduxjs/toolkit'
-import { useDispatch, useSelector, useStore } from '../../src'
+import { useDispatch, useSelector, useStore } from 'react-redux'
 
 export interface CounterState {
   counter: number

test/hooks/useDispatch.spec.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import { createStore } from 'redux'
 import { renderHook } from '@testing-library/react-hooks'
+import React from 'react'
+import type { ProviderProps, ReactReduxContextValue } from 'react-redux'
 import {
+  createDispatchHook,
   Provider as ProviderMock,
   useDispatch,
-  createDispatchHook,
-} from '../../src/index'
-import type { ProviderProps, ReactReduxContextValue } from '../../src/'
+} from 'react-redux'
+import { createStore } from 'redux'
 
 const store = createStore((c: number = 1): number => c + 1)
 const store2 = createStore((c: number = 1): number => c + 2)

test/hooks/useReduxContext.spec.tsx

@@ -1,10 +1,10 @@
-import { renderHook } from '@testing-library/react-hooks'
-import { createContext } from 'react'
-import type { ReactReduxContextValue } from '../../src/components/Context'
 import {
   createReduxContextHook,
   useReduxContext,
-} from '../../src/hooks/useReduxContext'
+} from '@internal/hooks/useReduxContext'
+import { renderHook } from '@testing-library/react-hooks'
+import { createContext } from 'react'
+import type { ReactReduxContextValue } from 'react-redux'
 
 describe('React', () => {
   describe('hooks', () => {
@@ -14,7 +14,7 @@ describe('React', () => {
 
         const { result } = renderHook(() => useReduxContext())
 
-        expect(result.error.message).toMatch(
+        expect(result.error?.message).toMatch(
           /could not find react-redux context value/,
         )
 
@@ -29,7 +29,7 @@ describe('React', () => {
 
         const { result } = renderHook(() => useCustomReduxContext())
 
-        expect(result.error.message).toMatch(
+        expect(result.error?.message).toMatch(
           /could not find react-redux context value/,
         )
 

test/hooks/useSelector.spec.tsx

@@ -1,5 +1,6 @@
 /*eslint-disable react/prop-types*/
 
+import type { UseSelectorOptions } from '@internal/hooks/useSelector'
 import * as rtl from '@testing-library/react'
 import type { DispatchWithoutAction, FunctionComponent, ReactNode } from 'react'
 import React, {
@@ -11,15 +12,12 @@ import React, {
   useReducer,
   useState,
 } from 'react'
-import type { Action, AnyAction, Store } from 'redux'
-import { createStore } from 'redux'
-import type { UseSelectorOptions } from '../../src/hooks/useSelector'
 import type {
   ProviderProps,
   ReactReduxContextValue,
   Subscription,
   TypedUseSelectorHook,
-} from '../../src/index'
+} from 'react-redux'
 import {
   Provider,
   ReactReduxContext,
@@ -28,7 +26,9 @@ import {
   shallowEqual,
   useDispatch,
   useSelector,
-} from '../../src/index'
+} from 'react-redux'
+import type { Action, AnyAction, Store } from 'redux'
+import { createStore } from 'redux'
 
 // disable checks by default
 function ProviderMock<A extends Action<any> = AnyAction, S = unknown>({

test/integration/dynamic-reducers.spec.tsx

@@ -4,10 +4,10 @@ import * as rtl from '@testing-library/react'
 import type { ReactNode } from 'react'
 import React from 'react'
 import ReactDOMServer from 'react-dom/server'
+import type { ReactReduxContextValue } from 'react-redux'
+import { Provider, ReactReduxContext, connect } from 'react-redux'
 import type { Store } from 'redux'
 import { combineReducers, createStore } from 'redux'
-import type { ReactReduxContextValue } from '../../src/index'
-import { Provider, ReactReduxContext, connect } from '../../src/index'
 
 describe('React', () => {
   /*
@@ -180,10 +180,7 @@ describe('React', () => {
       // This generates errors for using useLayoutEffect in v7
       // We hide that error by disabling console.error here
 
-      vi.spyOn(console, 'error')
-      // eslint-disable-next-line no-console
-      // @ts-ignore
-      console.error.mockImplementation(() => {})
+      const consoleErrorSpy =  vi.spyOn(console, 'error').mockImplementation(() => {})
 
       const markup = ReactDOMServer.renderToString(
         <Provider store={store}>
@@ -199,9 +196,7 @@ describe('React', () => {
       expect(markup).toContain('Hello world')
       expect(markup).toContain('Hello dynamic world')
 
-      // eslint-disable-next-line no-console
-      // @ts-ignore
-      console.error.mockRestore()
+      consoleErrorSpy.mockRestore()
     })
   })
 })

test/integration/server-rendering.spec.tsx

@@ -12,9 +12,9 @@ import type { PayloadAction } from '@reduxjs/toolkit'
 import type { FunctionComponent } from 'react'
 import React from 'react'
 import { renderToString } from 'react-dom/server'
+import { Provider, connect } from 'react-redux'
 import type { Dispatch, Store } from 'redux'
 import { createStore } from 'redux'
-import { Provider, connect } from '../../src/index'
 
 describe('React', () => {
   describe('server rendering', () => {