tests

Author: jquense

package.json

@@ -66,34 +66,31 @@
   "devDependencies": {
     "@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.26.4",
     "@babel/core": "^7.26.0",
     "@babel/preset-typescript": "^7.26.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.1.0",
-    "@types/jest": "^29.5.3",
     "@types/lodash": "^4.14.195",
     "@types/react": "^19.0.2",
-    "babel-jest": "^29.6.1",
     "babel-plugin-transform-rename-import": "^2.3.0",
     "cherry-pick": "^0.5.0",
     "codecov": "^3.8.3",
     "concurrently": "^9.1.2",
     "eslint": "^8.44.0",
     "gh-pages": "^3.1.0",
     "husky": "^4.3.6",
-    "jest": "^29.6.1",
-    "jest-environment-jsdom": "^29.6.1",
+    "jsdom": "^25.0.1",
     "lint-staged": "^13.2.3",
     "mq-polyfill": "^1.1.8",
     "prettier": "^3.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "rimraf": "^5.0.1",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "vitest": "^2.1.8"
   },
   "dependencies": {
     "dequal": "^2.0.3"

test/setup.js

@@ -1,4 +1,8 @@
 import matchMediaPolyfill from 'mq-polyfill'
+import { cleanup } from '@testing-library/react'
+import { afterEach } from 'vitest'
+
+afterEach(cleanup)
 
 // https://github.com/bigslycat/mq-polyfill
 
@@ -18,35 +22,3 @@ if (typeof window !== 'undefined') {
     }).dispatchEvent(new this.Event('resize'))
   }
 }
-
-let expectedErrors = 0
-let actualErrors = 0
-function onError(e) {
-  if (expectedErrors) {
-    e.preventDefault()
-  }
-  actualErrors += 1
-}
-
-expect.errors = (num) => {
-  expectedErrors = num
-}
-
-beforeEach(() => {
-  expectedErrors = 0
-  actualErrors = 0
-  if (typeof window !== 'undefined') {
-    window.addEventListener('error', onError)
-  }
-})
-
-afterEach(() => {
-  if (typeof window !== 'undefined') {
-    window.removeEventListener('error', onError)
-  }
-  if (expectedErrors) {
-    expect(actualErrors).toBe(expectedErrors)
-  }
-
-  expectedErrors = 0
-})

test/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "..",
   "compilerOptions": {
     "rootDir": "..",
-    "types": ["jest"],
+    "noEmit": true,
     "noImplicitAny": false
   },
   "include": [".", "../src"]

test/useAnimationFrame.test.tsx

@@ -1,17 +1,18 @@
 import { renderHook, act } from '@testing-library/react'
 import useAnimationFrame from '../src/useAnimationFrame.js'
+import { describe, it, beforeAll, afterAll, vi, expect } from 'vitest'
 
 describe('useAnimationFrame', () => {
   let rafSpy, rafCancelSpy
 
   beforeAll(() => {
-    rafSpy = jest
+    rafSpy = vi
       .spyOn(window, 'requestAnimationFrame')
       .mockImplementation((cb) => {
         return setTimeout(() => cb(1)) as any
       })
 
-    rafCancelSpy = jest
+    rafCancelSpy = vi
       .spyOn(window, 'cancelAnimationFrame')
       .mockImplementation((handle) => {
         clearTimeout(handle)
@@ -24,48 +25,48 @@ describe('useAnimationFrame', () => {
   })
 
   it('should requestAnimationFrame', () => {
-    jest.useFakeTimers()
+    vi.useFakeTimers()
 
-    let spy = jest.fn()
+    let spy = vi.fn()
 
     const { result } = renderHook(useAnimationFrame)
 
     act(() => result.current!.request(spy))
 
     expect(spy).not.toHaveBeenCalled()
 
-    jest.runAllTimers()
+    vi.runAllTimers()
 
     expect(spy).toHaveBeenCalledTimes(1)
   })
 
   it('should cancel a request', () => {
-    jest.useFakeTimers()
+    vi.useFakeTimers()
 
-    let spy = jest.fn()
+    let spy = vi.fn()
     const { result } = renderHook(useAnimationFrame)
 
     act(() => {
       result.current.request(spy)
 
       result.current.cancel()
     })
-    jest.runAllTimers()
+    vi.runAllTimers()
 
     expect(spy).toHaveBeenCalledTimes(0)
   })
 
   it('should cancel a request on unmount', () => {
-    jest.useFakeTimers()
+    vi.useFakeTimers()
 
-    let spy = jest.fn()
+    let spy = vi.fn()
     const { result, unmount } = renderHook(useAnimationFrame)
 
     act(() => result.current!.request(spy))
 
     unmount()
 
-    jest.runAllTimers()
+    vi.runAllTimers()
 
     expect(spy).toHaveBeenCalledTimes(0)
   })

test/useBreakpoint.ssr.test.tsx

@@ -1,10 +1,10 @@
 /**
- * @jest-environment node
+ * @vitest-environment node
  */
 
-import React from 'react'
 import { renderToString } from 'react-dom/server'
 import useBreakpoint from '../src/useBreakpoint.js'
+import { describe, it, expect } from 'vitest'
 
 describe('useBreakpoint (ssr)', () => {
   it('should match immediately if possible', () => {

test/useBreakpoint.test.tsx

@@ -3,17 +3,18 @@ import useBreakpoint, {
   createBreakpointHook,
 } from '../src/useBreakpoint.js'
 
+import { describe, it, vi, expect, afterEach, beforeEach } from 'vitest'
 import { renderHook } from '@testing-library/react'
 
 interface Props {
   breakpoint: DefaultBreakpointMap
 }
 
 describe('useBreakpoint', () => {
-  let matchMediaSpy: jest.SpyInstance<MediaQueryList, [string]>
+  let matchMediaSpy
 
   beforeEach(() => {
-    matchMediaSpy = jest.spyOn(window, 'matchMedia')
+    matchMediaSpy = vi.spyOn(window, 'matchMedia')
     window.resizeTo(1024, window.innerHeight)
   })
 

test/useCallbackRef.test.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect } from 'react'
+import { useEffect } from 'react'
 import { render, act } from '@testing-library/react'
 
+import { describe, it, vi, expect } from 'vitest'
 import useCallbackRef from '../src/useCallbackRef.js'
 
 describe('useCallbackRef', () => {
   it('should update value and be fresh in an effect', () => {
-    const effectSpy = jest.fn()
+    const effectSpy = vi.fn()
 
     function Wrapper({ toggle }) {
       const [ref, attachRef] = useCallbackRef<

test/useCommittedRef.test.tsx

@@ -1,21 +1,12 @@
 import { useEffect } from 'react'
 import { renderHook } from '@testing-library/react'
 import useCommittedRef from '../src/useCommittedRef.js'
+import { describe, it, vi, expect } from 'vitest'
 
 describe('useCommittedRef', () => {
   it('should use fresh value', () => {
-    function Foo({ fn }) {
-      const fnRef = useCommittedRef(fn)
-
-      useEffect(() => {
-        fnRef.current()
-      })
-
-      return null
-    }
-
-    const spyA = jest.fn()
-    const spyB = jest.fn()
+    const spyA = vi.fn()
+    const spyB = vi.fn()
 
     const { rerender } = renderHook(
       (fn) => {

test/useCustomEffect.test.tsx

@@ -1,13 +1,14 @@
+import { describe, it, vi, expect } from 'vitest'
 import useCustomEffect from '../src/useCustomEffect.js'
 import useImmediateUpdateEffect from '../src/useImmediateUpdateEffect.js'
 import { renderHook } from './helpers.js'
 
 describe('useCustomEffect', () => {
   it('should run custom isEqual logic', () => {
-    const teardown = jest.fn()
+    const teardown = vi.fn()
 
-    const spy = jest.fn().mockImplementation(() => teardown)
-    const isEqual = jest.fn((next, prev) => next[0].foo === prev[0].foo)
+    const spy = vi.fn().mockImplementation(() => teardown)
+    const isEqual = vi.fn((next, prev) => next[0].foo === prev[0].foo)
 
     const [, wrapper] = renderHook(
       ({ value }) => {
@@ -37,8 +38,8 @@ describe('useCustomEffect', () => {
   })
 
   it('should accept different hooks', () => {
-    const spy = jest.fn()
-    const hookSpy = jest.fn().mockImplementation(useImmediateUpdateEffect)
+    const spy = vi.fn()
+    const hookSpy = vi.fn().mockImplementation(useImmediateUpdateEffect)
 
     renderHook(
       ({ value }) => {