Bump all the things, and remove enzyme (#93)

* bump

* Update useRefWithInitialValueFactory.ts

* feat: add useIsInitialRenderRef

* Update test.yml

Author: jquense

.babelrc

@@ -9,10 +9,11 @@
             "modules": false
           }
         ]
+        
       ]
     },
     "test": {
-      "presets": [["@4c", { "development": true }]]
+      "presets": [["@4c", { "development": true }],  "@babel/typescript"]
     }
   }
 }

.github/workflows/test.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v1
         with:
-          node-version: 12.x
+          node-version: 18.x
       - name: Install Dependencies
         run: yarn bootstrap
       - name: Run Tests

package.json

@@ -41,9 +41,9 @@
   },
   "jest": {
     "preset": "@4c",
-    "rootDir": "./test",
+    "testEnvironment": "jsdom",
     "setupFilesAfterEnv": [
-      "./setup.js"
+      "./test/setup.js"
     ]
   },
   "prettier": {
@@ -62,38 +62,37 @@
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@4c/babel-preset": "^7.3.3",
-    "@4c/cli": "^2.1.12",
-    "@4c/jest-preset": "^1.5.4",
-    "@4c/rollout": "^2.1.11",
-    "@4c/tsconfig": "^0.3.1",
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.12.10",
-    "@babel/preset-typescript": "^7.12.7",
+    "@4c/babel-preset": "^10.2.1",
+    "@4c/cli": "^4.0.4",
+    "@4c/jest-preset": "^1.8.1",
+    "@4c/rollout": "^4.0.2",
+    "@4c/tsconfig": "^0.4.1",
+    "@babel/cli": "^7.22.9",
+    "@babel/core": "^7.22.9",
+    "@babel/preset-typescript": "^7.22.5",
+    "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^7.0.0",
-    "@types/enzyme": "^3.10.8",
-    "@types/jest": "^26.0.19",
-    "@types/lodash": "^4.14.167",
-    "@types/react": "^17.0.0",
-    "babel-jest": "^26.6.3",
+    "@types/jest": "^29.5.3",
+    "@types/lodash": "^4.14.195",
+    "@types/react": "^18.2.15",
+    "babel-jest": "^29.6.1",
     "babel-plugin-transform-rename-import": "^2.3.0",
     "cherry-pick": "^0.5.0",
-    "codecov": "^3.8.1",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.15.5",
-    "eslint": "^7.17.0",
+    "codecov": "^3.8.3",
+    "eslint": "^8.44.0",
     "gh-pages": "^3.1.0",
     "husky": "^4.3.6",
-    "jest": "^26.6.3",
-    "lint-staged": "^10.5.3",
+    "jest": "^29.6.1",
+    "jest-environment-jsdom": "^29.6.1",
+    "lint-staged": "^13.2.3",
     "mq-polyfill": "^1.1.8",
-    "prettier": "^2.2.1",
+    "prettier": "^3.0.0",
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
-    "rimraf": "^3.0.2",
-    "typescript": "^4.1.3"
+    "rimraf": "^5.0.1",
+    "typescript": "^5.1.6"
   },
   "dependencies": {
-    "dequal": "^2.0.2"
+    "dequal": "^2.0.3"
   }
 }

src/useForceUpdate.ts

@@ -18,7 +18,7 @@ import { useReducer } from 'react'
  */
 export default function useForceUpdate(): () => void {
   // The toggling state value is designed to defeat React optimizations for skipping
-  // updates when they are stricting equal to the last state value
+  // updates when they are strictly equal to the last state value
   const [, dispatch] = useReducer((state: boolean) => !state, false)
   return dispatch as () => void
 }

src/useIsInitialRenderRef.ts

@@ -0,0 +1,23 @@
+import { useEffect, useLayoutEffect, useRef } from 'react'
+
+/**
+ * Returns ref that is `true` on the initial render and `false` on subsequent renders. It
+ * is StrictMode safe, so will reset correctly if the component is unmounted and remounted
+ */
+export default function useIsInitialRenderRef() {
+  const isInitialRenderRef = useRef(true)
+
+  useLayoutEffect(() => {
+    isInitialRenderRef.current = false
+  })
+
+  // Strict mode handling in React 18
+  useEffect(
+    () => () => {
+      isInitialRenderRef.current = true
+    },
+    [],
+  )
+
+  return isInitialRenderRef
+}

src/useMergeStateFromProps.ts

@@ -5,7 +5,7 @@ type Mapper<TProps, TState> = (
   state: TState,
 ) => null | Partial<TState>
 
-export default function useMergeStateFromProps<TProps, TState>(
+export default function useMergeStateFromProps<TProps, TState extends {}>(
   props: TProps,
   gDSFP: Mapper<TProps, TState>,
   initialState: TState,

src/useRefWithInitialValueFactory.ts

@@ -1,10 +1,10 @@
 import { useRef } from 'react'
 
-const dft: any = Symbol('default value sigil')
+const dft: unique symbol = Symbol('default value sigil')
 
 /**
  * Exactly the same as `useRef` except that the initial value is set via a
- * factroy function. Useful when the default is relatively costly to construct.
+ * factory function. Useful when the default is relatively costly to construct.
  *
  *  ```ts
  *  const ref = useRefWithInitialValueFactory<ExpensiveValue>(() => constructExpensiveValue())
@@ -17,7 +17,7 @@ const dft: any = Symbol('default value sigil')
 export default function useRefWithInitialValueFactory<T>(
   initialValueFactory: () => T,
 ) {
-  const ref = useRef<T>(dft)
+  const ref = useRef<T>(dft as T)
   if (ref.current === dft) {
     ref.current = initialValueFactory()
   }

src/useThrottledEventHandler.ts

@@ -38,9 +38,9 @@ export type ThrottledHandler<TEvent> = ((event: TEvent) => void) & {
  * @returns The event handler with a `clear` method attached for clearing any in-flight handler calls
  *
  */
-export default function useThrottledEventHandler<TEvent = SyntheticEvent>(
-  handler: (event: TEvent) => void,
-): ThrottledHandler<TEvent> {
+export default function useThrottledEventHandler<
+  TEvent extends object = SyntheticEvent
+>(handler: (event: TEvent) => void): ThrottledHandler<TEvent> {
   const isMounted = useMounted()
   const eventHandler = useEventCallback(handler)
 

test/helpers.tsx

@@ -1,18 +1,24 @@
-import { ReactWrapper, mount } from 'enzyme'
+import { renderHook as baseRenderHook } from '@testing-library/react-hooks'
 import React from 'react'
 
+type ReactWrapper<P> = {
+  setProps(props: Partial<P>): void
+  unmount(): void
+}
+
 export function renderHook<T extends (props: P) => any, P = any>(
   fn: T,
   initialProps?: P,
 ): [ReturnType<T>, ReactWrapper<P>] {
-  const result = Array(2) as any
-
-  function Wrapper(props: any) {
-    result[0] = fn(props)
-    return <span />
-  }
-
-  result[1] = mount(<Wrapper {...initialProps} />)
+  const { rerender, result, unmount } = baseRenderHook(fn, { initialProps })
 
-  return result
+  return [
+    result.current,
+    {
+      unmount,
+      setProps(props: P) {
+        rerender({ ...initialProps, ...props })
+      },
+    },
+  ]
 }

test/setup.js

@@ -1,9 +1,5 @@
-import Enzyme from 'enzyme'
-import Adapter from 'enzyme-adapter-react-16'
 import matchMediaPolyfill from 'mq-polyfill'
 
-Enzyme.configure({ adapter: new Adapter() })
-
 // https://github.com/bigslycat/mq-polyfill
 
 if (typeof window !== 'undefined') {
@@ -32,7 +28,7 @@ function onError(e) {
   actualErrors += 1
 }
 
-expect.errors = num => {
+expect.errors = (num) => {
   expectedErrors = num
 }