chore: migrate from mocha to vitest

Removes mocha and runs all tests in vitest.

Notable changes:

- TypeScript tests are still run via `tsc`, but the associated test
  suites are now run in vitest _node mode_
- Shared tests are now run in both _browser mode_ and _node mode_
- Node tests are now run in _node mode_

The type tests have also been renamed to `*.test-d.tsx`, to make them
easier to exclude and in case we ever switch to vitest's type testing
feature.

Author: 43081j

package-lock.json

@@ -125,15 +125,13 @@
     "dev:hooks": "microbundle watch --raw --no-generateTypes --format cjs --cwd hooks",
     "dev:compat": "microbundle watch --raw --no-generateTypes --format cjs --cwd compat --globals 'preact/hooks=preactHooks'",
     "test": "npm-run-all build lint test:unit",
-    "test:unit": "run-p test:mocha test:vitest:min test:ts",
+    "test:unit": "run-p test:vitest:min test:ts",
     "test:vitest": "cross-env COVERAGE=true vitest run",
     "test:vitest:min": "cross-env MINIFY=true vitest run",
     "test:vitest:watch": "vitest",
     "test:ts": "run-p 'test:ts:*'",
-    "test:ts:core": "tsc -p test/ts/ && mocha --require \"@babel/register\" test/ts/**/*-test.js",
+    "test:ts:core": "tsc -p test/ts/",
     "test:ts:compat": "tsc -p compat/test/ts/",
-    "test:mocha": "mocha --recursive --require \"@babel/register\" test/shared test/node",
-    "test:mocha:watch": "npm run test:mocha -- --watch",
     "lint": "run-s oxlint tsc",
     "tsc": "tsc -p jsconfig-lint.json",
     "oxlint": "oxlint -c oxlint.json src test/browser test/node test/shared debug compat hooks test-utils",
@@ -209,7 +207,6 @@
     "@babel/register": "^7.25.9",
     "@biomejs/biome": "^1.9.4",
     "@types/chai": "^5.0.1",
-    "@types/mocha": "^10.0.0",
     "@types/node": "^18.19.87",
     "@types/sinon": "^17.0.3",
     "@vitest/browser": "^3.2.1",
@@ -223,7 +220,6 @@
     "husky": "^9.1.7",
     "kolorist": "^1.8.0",
     "microbundle": "^0.15.1",
-    "mocha": "^11.0.0",
     "npm-run-all2": "^7.0.0",
     "oxlint": "^0.15.12",
     "preact-render-to-string": "^6.5.0",

package.json

@@ -18,22 +18,20 @@ const validAriaRole = <button role="slider" />;
 const signalBadAriaRole = (
 	// @ts-expect-error A button should not have a role of presentation
 	<button role={createSignal('presentation' as const)} />
-)
-const signalValidAriaRole = (
-	<button role={createSignal('slider' as const)} />
-)
+);
+const signalValidAriaRole = <button role={createSignal('slider' as const)} />;
 
 // @ts-expect-error A map should never have any role set
 const invalidAriaRole = <map role="presentation" />;
 const signalInvalidAriaRole = (
 	// @ts-expect-error A map should never have any role set
 	<button role={createSignal('presentation' as const)} />
-)
-const validMissingAriaRole = <base href=""></base>
+);
+const validMissingAriaRole = <base href=""></base>;
 const signalValidMissingAriaRole = (
 	// @ts-expect-error A map should never have any role set
 	<button role={createSignal('presentation' as const)} />
-)
+);
 
 // More complex role tests w/ unions
 
@@ -43,7 +41,6 @@ const aWithHrefInvalid = <a href="foo" role="slider"></a>;
 
 const aWithoutHrefValid = <a role="button"></a>;
 
-
 const areaWithHrefValid = <area href="foo" role="link"></area>;
 // @ts-expect-error An area with an href should not have a role of button
 const areaWithHrefInvalid = <area href="foo" role="button"></area>;
@@ -52,15 +49,22 @@ const areaWithoutHrefValid = <area role="button"></area>;
 // @ts-expect-error An area with an href should not have a role of button
 const areaWithoutHrefInvalid = <area role="slider"></area>;
 
-
-const imgWithAccessibleNameAriaLabelValid = <img aria-label="foo" role="button" />;
-const imgWithAccessibleNameAriaLabelledByValid = <img aria-labelledby="foo" role="button" />;
+const imgWithAccessibleNameAriaLabelValid = (
+	<img aria-label="foo" role="button" />
+);
+const imgWithAccessibleNameAriaLabelledByValid = (
+	<img aria-labelledby="foo" role="button" />
+);
 const imgWithAccessibleNameAltValid = <img alt="foo" role="button" />;
 const imgWithAccessibleNameTitleValid = <img title="foo" role="button" />;
-// @ts-expect-error An img with an accessible name should not have a role of presentation
-const imgWithAccessibleNameAriaLabelInvalid = <img aria-label="foo" role="presentation" />;
-// @ts-expect-error An img with an accessible name should not have a role of presentation
-const imgWithAccessibleNameAriaLabelledByInvalid = <img aria-labelledby="foo" role="presentation" />;
+const imgWithAccessibleNameAriaLabelInvalid = (
+	// @ts-expect-error An img with an accessible name should not have a role of presentation
+	<img aria-label="foo" role="presentation" />
+);
+const imgWithAccessibleNameAriaLabelledByInvalid = (
+	// @ts-expect-error An img with an accessible name should not have a role of presentation
+	<img aria-labelledby="foo" role="presentation" />
+);
 // @ts-expect-error An img with an accessible name should not have a role of presentation
 const imgWithAccessibleNameAltInvalid = <img alt="foo" role="presentation" />;
 // @ts-expect-error An img with an accessible name should not have a role of presentation
@@ -70,12 +74,13 @@ const imgWithoutAccessibleNameValid = <img role="presentation" />;
 // @ts-expect-error An img without an accessible name should not have a role of button
 const imgWithoutAccessibleNameInvalid = <img role="button" />;
 
-
 const inputTypeButtonValid = <input type="button" role="checkbox" />;
 // @ts-expect-error An input of type button should not have a role of presentation
 const inputTypeButtonInvalid = <input type="button" role="presentation" />;
 
-const inputTypeCheckboxValid = <input type="checkbox" role="menuitemcheckbox" />;
+const inputTypeCheckboxValid = (
+	<input type="checkbox" role="menuitemcheckbox" />
+);
 // @ts-expect-error An input of type checkbox should not have a role of presentation
 const inputTypeCheckboxInvalid = <input type="checkbox" role="presentation" />;
 
@@ -88,8 +93,10 @@ const inputTypeDateValid = <input type="date" />;
 const inputTypeDateInvalid = <input type="date" role="button" />;
 
 const inputTypeDatetimeLocalValid = <input type="datetime-local" />;
-// @ts-expect-error An input of type datetime-local should not have a role
-const inputTypeDatetimeLocalInvalid = <input type="datetime-local" role="button" />;
+const inputTypeDatetimeLocalInvalid = (
+	// @ts-expect-error An input of type datetime-local should not have a role
+	<input type="datetime-local" role="button" />
+);
 
 const inputTypeEmailValid = <input type="email" role="textbox" />;
 // @ts-expect-error An input of type email, without a list attribute, should not have a role of button
@@ -151,11 +158,15 @@ const inputTypeOmittedValid = <input role="combobox" />;
 // @ts-expect-error An input of type text should not have a role of presentation
 const inputTypeOmittedInvalid = <input role="presentation" />;
 
-const inputTypeEmailListValid = <input type="email" list="foo" role="combobox" />;
+const inputTypeEmailListValid = (
+	<input type="email" list="foo" role="combobox" />
+);
 // @ts-expect-error An input of type email, with a list attribute, should not have a role of button
 const inputTypeEmailListInvalid = <input type="email" role="button" />;
 
-const inputTypeSearchListValid = <input type="search" list="foo" role="combobox" />;
+const inputTypeSearchListValid = (
+	<input type="search" list="foo" role="combobox" />
+);
 // @ts-expect-error An input of type search, with a list attribute, should not have a role of button
 const inputTypeSearchListInvalid = <input type="search" role="button" />;
 
@@ -167,7 +178,9 @@ const inputTypeTextListValid = <input type="text" list="foo" role="combobox" />;
 // @ts-expect-error An input of type text, with a list attribute, should not have a role of button
 const inputTypeTextListInvalid = <input type="text" role="button" />;
 
-const inputTypeOmittedListValid = <input type="text" list="foo" role="combobox" />;
+const inputTypeOmittedListValid = (
+	<input type="text" list="foo" role="combobox" />
+);
 // @ts-expect-error An input of type text, with a list attribute, should not have a role of button
 const inputTypeOmittedListInvalid = <input type="text" role="button" />;
 
@@ -199,8 +212,6 @@ const selectSizeValid = <select size={5} role="listbox" />;
 // @ts-expect-error A select with a size other than `0` or `1` should not have a role of menu
 const selectSizeInvalid = <select size={5} role="menu" />;
 
-
-
 // @ts-expect-error We should correctly type aria attributes like autocomplete
 const badAriaValues = <div aria-autocomplete="bad-value" />;
 const validAriaValues = <div aria-autocomplete="none" />;

test/ts/Component-test.tsx renamed to test/ts/Component.test.tsx

@@ -5,7 +5,7 @@ import {
 	ComponentConstructor,
 	Component
 } from '../../';
-import { SimpleComponent, SimpleComponentProps } from './Component-test';
+import { SimpleComponent, SimpleComponentProps } from './Component.test';
 
 export interface highlightedProps {
 	isHighlighted: boolean;

test/ts/VNode-test.tsx renamed to test/ts/VNode.test.tsx

@@ -5,12 +5,13 @@
     "moduleResolution": "node",
     "lib": ["es6", "dom"],
     "strict": true,
-    "typeRoots": ["../../"],
-    "types": [],
+    "typeRoots": ["../../", "../../node_modules"],
+    "types": ["vitest/globals"],
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "jsxFactory": "createElement",
     "jsxFragmentFactory": "Fragment",
+    "skipLibCheck": true,
     "paths": {
       "preact": ["../../"],
       "preact/*": ["../../*"]

test/ts/dom-attributes-test.tsx renamed to test/ts/dom-attributes.test-d.tsx

@@ -130,8 +130,6 @@ for (let prop in mangleJson.props.props) {
 	rename[name] = mangleJson.props.props[prop];
 }
 
-const cache = new Map();
-const pending = new Map();
 export default defineConfig({
 	resolve: {
 		alias: rollupAlias,
@@ -211,11 +209,8 @@ export default defineConfig({
 		}
 	},
 	test: {
-		include: [
-			'{debug,devtools,hooks,compat,test-utils,jsx-runtime}/test/{browser,shared}/**/*.test.js',
-			'./test/{browser,shared}/**/*.test.js'
-		],
 		cache: false,
+		globals: true,
 		coverage: {
 			enabled: COVERAGE,
 			include: MINIFY
@@ -242,17 +237,33 @@ export default defineConfig({
 			reporter: ['html', 'lcovonly', 'text-summary'],
 			reportsDirectory: './coverage'
 		},
-		setupFiles: ['./vitest.setup.js'],
-		globals: true,
-		// dangerouslyIgnoreUnhandledErrors: true,
-		browser: {
-			// TODO: isolate doesn't work it leaks across all pages
-			// isolate: false,
-			provider: 'webdriverio',
-			enabled: true,
-			screenshotFailures: false,
-			headless: true,
-			instances: [{ browser: 'chrome' }]
-		}
+		projects: [
+			{
+				extends: true,
+				test: {
+					include: ['./test/{shared,node,ts}/**/*.test.js']
+				}
+			},
+			{
+				extends: true,
+				test: {
+					include: [
+						'{debug,devtools,hooks,compat,test-utils,jsx-runtime}/test/{browser,shared}/**/*.test.js',
+						'./test/{browser,shared}/**/*.test.js'
+					],
+					setupFiles: ['./vitest.setup.js'],
+					// dangerouslyIgnoreUnhandledErrors: true,
+					browser: {
+						// TODO: isolate doesn't work it leaks across all pages
+						// isolate: false,
+						provider: 'webdriverio',
+						enabled: true,
+						screenshotFailures: false,
+						headless: true,
+						instances: [{ browser: 'chrome' }]
+					}
+				}
+			}
+		]
 	}
 });