upgrade dependencies, migrate to vitest

package.json

@@ -31,7 +31,7 @@
   "scripts": {
     "build": "npm run build --workspace=@react-rxjs/core && npm run build --workspace=@react-rxjs/utils --workspace=@react-rxjs/dom",
     "lint": "npm run lint --workspaces",
-    "format": "npm ru format --workspaces",
+    "format": "npm run format --workspaces",
     "test": "npm run test --workspaces",
     "prepare": "husky install"
   },
@@ -41,28 +41,26 @@
     "trailingComma": "all"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-typescript": "^7.16.7",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/react-hooks": "^8.0.0-alpha.1",
-    "@types/jest": "^27.4.1",
-    "@types/react": "^18.0.1",
-    "@types/react-dom": "^18.0.0",
-    "babel-jest": "^27.5.1",
-    "esbuild": "^0.14.34",
-    "husky": ">=7.0.4",
-    "jest": "^27.5.1",
-    "jest-marbles": "^3.0.2",
-    "lint-staged": ">=11.2.0",
-    "prettier": "^2.6.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-test-renderer": "^18.0.0",
-    "rxjs": "^7.5.5",
-    "ts-jest": "^27.1.4",
-    "tslib": "^2.3.1",
-    "typescript": "^4.6.3"
+    "@babel/preset-env": "^7.22.7",
+    "@babel/preset-typescript": "^7.22.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@vitest/coverage-v8": "^0.33.0",
+    "esbuild": "^0.18.11",
+    "expose-gc": "^1.0.0",
+    "husky": ">=8.0.3",
+    "jest-environment-jsdom": "^29.6.1",
+    "jsdom": "^22.1.0",
+    "lint-staged": ">=13.2.3",
+    "prettier": "^3.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "rxjs": "^7.8.1",
+    "tslib": "^2.6.0",
+    "typescript": "^5.1.6",
+    "vitest": "^0.33.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,json,md}": "prettier --write"

packages/core/package.json

@@ -31,7 +31,8 @@
     "build:cjs:dev": "node cjsBuild.js",
     "build:cjs:prod": "node cjsBuild.js --prod",
     "build:ts": "tsc -p ./tsconfig-build.json --outDir ./dist --skipLibCheck --emitDeclarationOnly",
-    "test": "jest --coverage",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest watch",
     "lint": "prettier --check README.md \"src/**/*.{js,jsx,ts,tsx,json,md}\"",
     "format": "prettier --write README.md \"src/**/*.{js,jsx,ts,tsx,json,md}\"",
     "prepack": "npm run build"

packages/core/src/Subscribe.test.tsx

@@ -8,6 +8,7 @@ import {
 import { act, render, screen } from "@testing-library/react"
 import React, { StrictMode, useEffect, useState } from "react"
 import { defer, EMPTY, NEVER, Observable, of, startWith, Subject } from "rxjs"
+import { describe, it, expect, vi } from "vitest"
 import { bind, RemoveSubscribe, Subscribe as OriginalSubscribe } from "./"
 import { TestErrorBoundary } from "./test-helpers/TestErrorBoundary"
 import { useStateObservable } from "./useStateObservable"
@@ -341,7 +342,7 @@ describe("Subscribe", () => {
         return <>{value}</>
       }
 
-      const errorCallback = jest.fn()
+      const errorCallback = vi.fn()
       const { unmount } = render(
         <TestErrorBoundary onError={errorCallback}>
           <Subscribe fallback={<div>Loading...</div>}>
@@ -362,8 +363,8 @@ describe("Subscribe", () => {
     })
 
     it("propagates the EmptyObservable error if a stream completes synchronously", async () => {
-      const globalErrors = jest.spyOn(console, "error")
-      globalErrors.mockImplementation()
+      const globalErrors = vi.spyOn(console, "error")
+      globalErrors.mockImplementation((v) => v)
 
       const [useEmpty] = bind(() => EMPTY)
 
@@ -372,7 +373,7 @@ describe("Subscribe", () => {
         return null
       }
 
-      const errorCallback = jest.fn()
+      const errorCallback = vi.fn()
       const { unmount } = render(
         <TestErrorBoundary onError={errorCallback}>
           <Subscribe fallback={<div>Loading...</div>}>
@@ -442,7 +443,7 @@ describe("RemoveSubscribe", () => {
       return <>{value}</>
     }
 
-    const errorCallback = jest.fn()
+    const errorCallback = vi.fn()
     render(
       <TestErrorBoundary onError={(e) => errorCallback(e.message)}>
         <Subscribe>

packages/core/src/bind/connectFactoryObservable.test.tsx

@@ -10,7 +10,7 @@ import {
   EMPTY,
   NEVER,
 } from "rxjs"
-import { renderHook, act as actHook } from "@testing-library/react-hooks"
+import { renderHook, act as actHook } from "@testing-library/react"
 import {
   delay,
   take,
@@ -31,6 +31,7 @@ import {
   act,
   waitFor,
 } from "@testing-library/react"
+import { describe, it, beforeAll, afterAll, expect, vi } from "vitest"
 import { bind, Subscribe } from "../"
 import { TestErrorBoundary } from "../test-helpers/TestErrorBoundary"
 
@@ -319,7 +320,7 @@ describe("connectFactoryObservable", () => {
         return <>{value}</>
       }
 
-      const errorCallback = jest.fn()
+      const errorCallback = vi.fn()
       render(
         <TestErrorBoundary onError={errorCallback}>
           <ErrorComponent />
@@ -348,7 +349,7 @@ describe("connectFactoryObservable", () => {
         return <>{value}</>
       }
 
-      const errorCallback = jest.fn()
+      const errorCallback = vi.fn()
       const { unmount } = render(
         <TestErrorBoundary onError={errorCallback}>
           <Subscribe
@@ -377,7 +378,7 @@ describe("connectFactoryObservable", () => {
         return <>{value}</>
       }
 
-      const errorCallback = jest.fn()
+      const errorCallback = vi.fn()
       const { unmount } = render(
         <TestErrorBoundary onError={errorCallback}>
           <Subscribe
@@ -432,7 +433,7 @@ describe("connectFactoryObservable", () => {
           )
         }
 
-        const errorCallback = jest.fn()
+        const errorCallback = vi.fn()
         const { unmount } = render(
           <TestErrorBoundary onError={errorCallback}>
             <ErrorComponent />
@@ -484,7 +485,7 @@ describe("connectFactoryObservable", () => {
         return value === 1 ? <ErrorComponent /> : <>Nothing to show here</>
       }
 
-      const errorCallback = jest.fn()
+      const errorCallback = vi.fn()
       render(
         <TestErrorBoundary onError={errorCallback}>
           <Container />

packages/core/src/bind/connectObservable.test.tsx

@@ -4,7 +4,7 @@ import {
   render,
   screen,
 } from "@testing-library/react"
-import { act, renderHook } from "@testing-library/react-hooks"
+import { act, renderHook } from "@testing-library/react"
 import React, { FC, StrictMode, Suspense, useEffect, useState } from "react"
 import {
   defer,
@@ -25,6 +25,7 @@ import {
   startWith,
   switchMapTo,
 } from "rxjs/operators"
+import { describe, it, beforeAll, afterAll, expect, vi } from "vitest"
 import {
   bind,
   sinkSuspense,
@@ -192,7 +193,7 @@ describe("connectObservable", () => {
       )
     }
 
-    const updates = jest.fn()
+    const updates = vi.fn()
     render(<BatchComponent onUpdate={updates} />)
     expect(updates).toHaveBeenCalledTimes(1)
 
@@ -419,7 +420,7 @@ describe("connectObservable", () => {
       return <>{value}</>
     }
 
-    const errorCallback = jest.fn()
+    const errorCallback = vi.fn()
     render(
       <TestErrorBoundary onError={errorCallback}>
         <ErrorComponent />
@@ -447,7 +448,7 @@ describe("connectObservable", () => {
       return <>{value}</>
     }
 
-    const errorCallback = jest.fn()
+    const errorCallback = vi.fn()
     const { unmount } = render(
       <TestErrorBoundary onError={errorCallback}>
         <Subscribe source$={errStream$} fallback={<div>Loading...</div>}>
@@ -474,7 +475,7 @@ describe("connectObservable", () => {
       return <>{value}</>
     }
 
-    const errorCallback = jest.fn()
+    const errorCallback = vi.fn()
     const { unmount } = render(
       <TestErrorBoundary onError={errorCallback}>
         <Subscribe fallback={<div>Loading...</div>}>
@@ -501,7 +502,7 @@ describe("connectObservable", () => {
       return <>{value}</>
     }
 
-    const errorCallback = jest.fn()
+    const errorCallback = vi.fn()
     const { unmount } = render(
       <TestErrorBoundary onError={errorCallback}>
         <Subscribe source$={errStream$} fallback={<div>Loading...</div>}>
@@ -527,7 +528,7 @@ describe("connectObservable", () => {
       return <>{value}</>
     }
 
-    const errorCallback = jest.fn()
+    const errorCallback = vi.fn()
     const { unmount } = render(
       <TestErrorBoundary onError={errorCallback}>
         <Subscribe
@@ -570,7 +571,7 @@ describe("connectObservable", () => {
       return <>{value}</>
     }
 
-    const errorCallback = jest.fn()
+    const errorCallback = vi.fn()
     const { unmount } = render(
       <TestErrorBoundary onError={errorCallback}>
         <Subscribe source$={error$} fallback={<div>Loading...</div>}>
@@ -641,7 +642,7 @@ describe("connectObservable", () => {
       return value === 1 ? <ErrorComponent /> : <>Nothing to show here</>
     }
 
-    const errorCallback = jest.fn()
+    const errorCallback = vi.fn()
     render(
       <TestErrorBoundary onError={errorCallback}>
         <Container />
@@ -666,19 +667,21 @@ describe("connectObservable", () => {
     )
     const subscription = function$.subscribe()
 
-    const { result } = renderHook(() => useFunction())
+    const { result, rerender } = renderHook(() => useFunction())
 
     expect(result.current()).toBe(0)
 
     values$.next(1)
+    rerender()
+
     expect(result.current()).toBe(1)
 
     subscription.unsubscribe()
   })
 
   it("should throw an error when the stream does not have a subscription", () => {
     const [useValue] = bind(of("Hello"))
-    const errorCallback = jest.fn()
+    const errorCallback = vi.fn()
 
     const Component: FC = () => <>{useValue()}</>
     render(
@@ -698,7 +701,7 @@ describe("connectObservable", () => {
   it("should throw an error if the stream completes without emitting while on SUSPENSE", async () => {
     const subject = new Subject()
     const [useValue, value$] = bind(subject)
-    const errorCallback = jest.fn()
+    const errorCallback = vi.fn()
 
     const Component: FC = () => <>{useValue()}</>
     render(

packages/core/src/shareLatest.test.ts

@@ -2,6 +2,7 @@ import { TestScheduler } from "rxjs/testing"
 import { from, merge, defer, Observable, noop } from "rxjs"
 import { shareLatest } from "./"
 import { withLatestFrom, startWith, map, take } from "rxjs/operators"
+import { describe, it, expect } from "vitest"
 
 const scheduler = () =>
   new TestScheduler((actual, expected) => {

packages/core/src/stateJsx.test.tsx

@@ -1,6 +1,7 @@
 import { render, screen, act } from "@testing-library/react"
 import React, { Suspense } from "react"
 import { map, Subject } from "rxjs"
+import { describe, it, expect } from "vitest"
 import { state } from "./"
 
 describe("stateJsx", () => {

packages/dom/package.json

@@ -32,7 +32,8 @@
     "build:cjs:dev": "esbuild src/index.tsx --bundle --outfile=./dist/dom.cjs.development.js --target=es2015 --external:react --external:rxjs --external:react-dom --format=cjs --sourcemap",
     "build:cjs:prod": "esbuild src/index.tsx --bundle --outfile=./dist/dom.cjs.production.min.js --target=es2015 --external:react --external:rxjs --external:react-dom --format=cjs --minify --sourcemap",
     "build:ts": "tsc -p ./tsconfig.json --outDir ./dist --skipLibCheck --emitDeclarationOnly",
-    "test": "jest --coverage",
+    "test": "vitest run --coverage",
+    "test:watch": "vitest watch",
     "lint": "prettier --check README.md \"src/**/*.{js,jsx,ts,tsx,json,md}\"",
     "format": "prettier --write README.md \"src/**/*.{js,jsx,ts,tsx,json,md}\"",
     "prepack": "npm run build"