test: migrate react tests to vitest (#716)

* test: migrate react tests to vitest

* test: migrate react-transform to vitest

* chore: remove mocha/sinon/chai/karma

* fix: add exact import

* fix: strongly type mocked components

* test: add the sketchy transform back

* fix: funky runtime path

* fix: resolve signals after runtime

* test: map things to places

* test: use vitest aliases

THIS MAY ACTUALLY WORK!

* chore: use react 16 in runtime too

Author: 43081j

.github/workflows/main.yml

@@ -46,6 +46,11 @@ jobs:
       - name: Test react production build
         run: pnpm test:prod
 
+      - name: Prepare runtime with React 16
+        working-directory: packages/react/runtime
+        run: |
+          pnpm i react@16 react-dom@16 react-router-dom@5
+
       - name: Test React 16
         working-directory: packages/react
         run: |

karma.conf.js

@@ -226,10 +226,7 @@ function createEsbuildPlugin(filteredPkgList) {
 }
 
 const pkgList = {
-	react: "@preact/signals-react",
-	"react/utils": "@preact/signals-react/utils",
 	"react/runtime": "@preact/signals-react/runtime",
-	"react-transform": "@preact/signals-react-transform",
 };
 
 module.exports = function (config) {

mangle.json

@@ -5,11 +5,7 @@
   },
   "minify": {
     "mangle": {
-      "reserved": [
-        "useSignal",
-        "useComputed",
-        "useSignalEffect"
-      ],
+      "reserved": ["useSignal", "useComputed", "useSignalEffect"],
       "keep_classnames": true,
       "properties": {
         "regex": "^_[^_]",

package.json

@@ -22,17 +22,11 @@
     "lint:oxlint": "oxlint 'packages/**/*.{ts,tsx,js,jsx}'",
     "lint:tsc": "tsc -p tsconfig.json --noEmit",
     "lint-staged": "lint-staged",
-    "test": "pnpm test:karma && pnpm test:mocha && pnpm test:vitest",
-    "test:minify": "pnpm test:karma:minify && pnpm test:mocha",
-    "test:prod": "pnpm test:karma:prod && pnpm test:mocha:prod",
-    "test:karma": "cross-env COVERAGE=true karma start karma.conf.js --single-run",
-    "test:karma:minify": "cross-env COVERAGE=true MINIFY=true karma start karma.conf.js --single-run",
-    "test:karma:watch": "karma start karma.conf.js --no-single-run",
-    "test:karma:prod": "cross-env MINIFY=true NODE_ENV=production karma start karma.conf.js --single-run",
-    "test:karma:prod:watch": "cross-env NODE_ENV=production karma start karma.conf.js --no-single-run",
-    "test:mocha": "cross-env COVERAGE=true mocha --require test/node/setup.js --recursive packages/*/test/node/**.test.tsx --ignore \"packages/{preact/utils,preact,core}\"",
-    "test:mocha:prod": "cross-env COVERAGE=true NODE_ENV=production mocha --require test/node/setup.js --recursive packages/*/test/node/**.test.tsx --ignore \"packages/{preact/utils,preact,core}\"",
+    "test": "pnpm test:vitest",
+    "test:minify": "pnpm test:vitest:prod",
+    "test:prod": "pnpm test:vitest:prod",
     "test:vitest": "cross-env COVERAGE=true vitest run",
+    "test:vitest:prod": "cross-env COVERAGE=true MINIFY=true vitest run",
     "docs:start": "cd docs && pnpm start",
     "docs:build": "cd docs && pnpm build",
     "docs:preview": "cd docs && pnpm preview",
@@ -60,40 +54,25 @@
     "@babel/standalone": "^7.27.7",
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
+    "@preact/signals-react-transform": "workspace:*",
     "@types/babel__traverse": "^7.18.5",
-    "@types/chai": "^4.3.3",
-    "@types/mocha": "^9.1.1",
     "@types/node": "^18.19.103",
-    "@types/sinon": "^10.0.13",
-    "@types/sinon-chai": "^3.2.8",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-v8": "^3.2.4",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-transform-rename-properties": "^0.1.0",
     "buffer": "^6.0.3",
-    "chai": "^4.3.6",
     "cross-env": "^7.0.3",
     "errorstacks": "^2.4.0",
     "esbuild": "^0.14.54",
     "husky": "^8.0.1",
-    "karma": "6.4.2",
-    "karma-chai-sinon": "^0.1.5",
-    "karma-chrome-launcher": "^3.1.1",
-    "karma-coverage": "^2.2.0",
-    "karma-esbuild": "^2.2.5",
-    "karma-mocha": "^2.0.1",
-    "karma-mocha-reporter": "^2.2.5",
-    "karma-sinon": "^1.0.5",
     "kolorist": "^1.5.1",
     "lint-staged": "^14.0.1",
     "microbundle": "^0.15.1",
-    "mocha": "^10.0.0",
     "oxlint": "^1.3.0",
     "playwright": "^1.53.1",
     "prettier": "^3.6.2",
     "shx": "^0.3.4",
-    "sinon": "^14.0.0",
-    "sinon-chai": "^3.7.0",
     "typescript": "~5.8.3",
     "vitest": "^3.2.4",
     "vite": "^6.3.5"

packages/react-transform/package.json

@@ -57,6 +57,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.22.8",
+    "@preact/signals-core": "workspace:*",
     "@types/babel__core": "^7.20.1",
     "@types/babel__helper-module-imports": "^7.18.0",
     "@types/babel__helper-plugin-utils": "^7.10.0",

packages/react-transform/test/browser/e2e.test.tsx

@@ -13,6 +13,8 @@ import {
 	createRoot,
 	getConsoleErrorSpy,
 } from "../../../react/test/shared/utils";
+import { describe, beforeEach, afterEach, expect, it } from "vitest";
+import "../../../../test/browser/babel.js";
 
 const customSource = "useSignals-custom-source";
 const modules: Record<string, any> = {
@@ -32,8 +34,6 @@ function testRequire(name: string) {
 }
 
 async function createComponent(code: string, options?: PluginOptions) {
-	// `transformSignalCode` is a global helper function added to the global
-	// namespace by a test helper we've included in the Karma config.
 	const cjsCode = transformSignalCode(code, options);
 	// console.log(cjsCode); // Useful when debugging tests.
 
@@ -55,7 +55,7 @@ describe("React Signals babel transfrom - browser E2E tests", () => {
 		scratch = document.createElement("div");
 		document.body.appendChild(scratch);
 		root = await createRoot(scratch);
-		getConsoleErrorSpy().resetHistory();
+		getConsoleErrorSpy().mockClear();
 	});
 
 	afterEach(async () => {

packages/react-transform/test/node/index.test.tsx

@@ -19,6 +19,7 @@ import {
 	objMethodComp,
 	variableHooks,
 } from "./helpers";
+import { it, describe, expect } from "vitest";
 
 // To help interactively debug a specific test case, add the test ids of the
 // test cases you want to debug to the `debugTestIds` array, e.g. (["258",

packages/react/runtime/package.json

@@ -21,6 +21,9 @@
     "@preact/signals-core": "workspace:^1.3.0",
     "use-sync-external-store": "^1.2.0"
   },
+  "devDependencies": {
+    "@preact/signals-react": "workspace:*"
+  },
   "peerDependencies": {
     "react": "^16.14.0 || 17.x || 18.x"
   }

packages/react/runtime/test/browser/mounts.test.tsx

@@ -9,6 +9,7 @@ import {
 	createRoot,
 	type Root,
 } from "../../../test/shared/utils.js";
+import { describe, beforeEach, afterEach } from "vitest";
 
 describe("@preact/signals-react/runtime", () => {
 	describe("mounting", () => {
@@ -25,7 +26,7 @@ describe("@preact/signals-react/runtime", () => {
 		beforeEach(async () => {
 			scratch = document.createElement("div");
 			document.body.appendChild(scratch);
-			getConsoleErrorSpy().resetHistory();
+			getConsoleErrorSpy().mockClear();
 
 			root = await createRoot(scratch);
 		});

packages/react/runtime/test/browser/suspense.test.tsx

@@ -15,6 +15,7 @@ import {
 	checkHangingAct,
 	getConsoleErrorSpy,
 } from "../../../test/shared/utils";
+import { beforeEach, afterEach, describe, it, expect } from "vitest";
 
 describe("Suspense", () => {
 	let scratch: HTMLDivElement;
@@ -28,7 +29,7 @@ describe("Suspense", () => {
 		scratch = document.createElement("div");
 		document.body.appendChild(scratch);
 		root = await createRoot(scratch);
-		getConsoleErrorSpy().resetHistory();
+		getConsoleErrorSpy().mockClear();
 	});
 
 	afterEach(async () => {