test: migrate react-transform to vitest

Author: 43081j

package.json

@@ -60,6 +60,7 @@
     "@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",

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/test/shared/utils.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { vi, type MockInstance } from "vitest";
+import { vi, expect, type MockInstance } from "vitest";
 import { act as realAct } from "react-dom/test-utils";
 
 export interface Root {

pnpm-lock.yaml

@@ -33,6 +33,15 @@ export default defineConfig({
 	plugins: [
 		manglePlugin
 	],
+	// TODO (43081j): stop faking node globals and sort out the transform
+	// tests. Either run them in node, or somehow run babel in node but the
+	// tests in browser
+	define: {
+		IS_REACT_ACT_ENVIRONMENT: true,
+		process: {
+			env: {}
+		}
+	},
 	test: {
 		coverage: {
 			enabled: COVERAGE,
@@ -49,15 +58,15 @@ export default defineConfig({
 				extends: true,
 				test: {
 					include: [
-						'./packages/{,preact/utils,preact,react}/test/**/*.test.tsx',
-						'!./packages/{,preact/utils,preact,react}/test/browser/**/*.test.tsx'
+						'./packages/{,preact/utils,preact,react,react-transform}/test/**/*.test.tsx',
+						'!./packages/{,preact/utils,preact,react,react-transform}/test/browser/**/*.test.tsx'
 					],
 				}
 			},
 			{
 				extends: true,
 				test: {
-					include: ['./packages/{,preact/utils,preact,react}/test/browser/**/*.test.tsx'],
+					include: ['./packages/{,preact/utils,preact,react,react-transform}/test/browser/**/*.test.tsx'],
 					browser: {
 						provider: 'playwright',
 						enabled: true,