chore: move unit tests to vitest

package.json

@@ -16,7 +16,7 @@
 		}
 	},
 	"scripts": {
-		"type-check": "tsc --noEmit",
+		"type-check": "tsc --noEmit && tsc -p tsconfig.vitest.json --noEmit",
 		"prebuild": "npm run type-check",
 		"prepublishOnly": "npm run run build:inline",
 		"build": "node tools/build.mjs --browser chrome,edge,firefox,inline && npm run build:inline:types",
@@ -26,8 +26,8 @@
 		"build:inline:types": "tsc -p tsconfig.inline.json",
 		"build:inline": "node tools/build.mjs --browser inline && tsc -p tsconfig.inline.json",
 		"archive": "git archive --format zip --output dist/source-code.zip main",
-		"lint": "eslint 'src/**/*.{ts,tsx}' 'test-e2e/**/*.ts'",
-		"test": "TS_NODE_FILES=true TS_NODE_PROJECT=tsconfig.cjs.json mocha -r ignore-styles -r ts-node/register --extensions=ts,tsx,js --watch-files src -r tools/test-setup.js 'src/**/*.test.{ts,tsx}'",
+		"lint": "eslint 'src/**/*.{ts,tsx}' 'test-e2e/**/*.ts' 'tools/**/*.ts' 'vitest*.ts'",
+		"test": "vitest run --config vitest.config.ts",
 		"test:e2e": "node tools/fetch-preact-versions.mjs && playwright test",
 		"test:e2e:10": "PREACT_VERSION=10 npm run test:e2e",
 		"test:e2e:11": "PREACT_VERSION=11 npm run test:e2e",
@@ -50,15 +50,12 @@
 		"@babel/plugin-syntax-typescript": "^7.18.6",
 		"@babel/plugin-transform-react-jsx": "^7.18.10",
 		"@playwright/test": "^1.59.1",
-		"@preact/preset-vite": "^2.8.2",
 		"@preact/signals": "^1.2.3",
 		"@prefresh/vite": "^2.4.5",
 		"@testing-library/preact": "^3.2.3",
 		"@types/archiver": "^5.3.1",
 		"@types/babel__core": "^7.1.19",
-		"@types/chai": "^5.2.0",
 		"@types/chrome": "^0.0.310",
-		"@types/mocha": "^10.0.10",
 		"@types/mri": "^1.1.1",
 		"@types/node": "^25.6.0",
 		"@types/node-fetch": "^2.6.2",
@@ -71,27 +68,24 @@
 		"babel-plugin-transform-define": "^2.1.0",
 		"babel-plugin-transform-jsx-to-htm": "^2.2.0",
 		"babel-plugin-transform-rename-properties": "^0.1.0",
-		"chai": "^5.2.0",
 		"cross-env": "^7.0.2",
-		"esbuild": "^0.15.5",
+		"esbuild": "^0.28.0",
 		"eslint": "^8.57.0",
 		"eslint-plugin-react": "^7.34.1",
 		"fs-extra": "^10.1.0",
 		"husky": "^4.3.0",
-		"ignore-styles": "^5.0.1",
 		"jsdom": "^26.0.0",
 		"kolorist": "^1.5.1",
 		"lightningcss": "^1.24.1",
 		"lint-staged": "^10.4.0",
-		"mocha": "^11.1.0",
 		"mri": "^1.2.0",
 		"preact": "^10.25.1",
 		"prettier": "^3.5.3",
 		"sinon": "^19.0.4",
 		"tar": "^6.1.11",
-		"ts-node": "^10.9.2",
 		"typescript": "^5.4.5",
-		"vite": "^5.2.10",
+		"vite": "^8.0.10",
+		"vitest": "^4.1.5",
 		"web-ext": "^8.5.0"
 	},
 	"dependencies": {
@@ -135,8 +129,13 @@
 		},
 		"env": {
 			"browser": true,
-			"node": true,
-			"mocha": true
+			"node": true
+		},
+		"globals": {
+			"afterEach": "readonly",
+			"beforeEach": "readonly",
+			"describe": "readonly",
+			"it": "readonly"
 		},
 		"rules": {
 			"@typescript-eslint/explicit-function-return-type": "off",

src/adapter/debug.test.ts

@@ -1,4 +1,4 @@
-import { expect } from "chai";
+import { expect } from "vitest";
 import { fromSnapshot, toStringTable } from "./debug";
 import { MsgTypes } from "./protocol/events";
 import { DevNodeType } from "../view/store/types";

src/adapter/parse-semverish.test.ts

@@ -1,5 +1,5 @@
 import parseSemverish from "./parse-semverish";
-import { expect } from "chai";
+import { expect } from "vitest";
 
 describe("parse-semverish", () => {
 	it("should parse normal", () => {

src/adapter/protocol/events.test.ts

@@ -1,4 +1,4 @@
-import { expect } from "chai";
+import { expect } from "vitest";
 import { applyEvent } from "./events";
 import * as sinon from "sinon";
 import { createStore } from "../../view/store";

src/adapter/protocol/operations.test.ts

@@ -1,4 +1,4 @@
-import { expect } from "chai";
+import { expect } from "vitest";
 import { ops2Tree } from "./operations";
 import { fromSnapshot } from "../debug";
 import { flames } from "../../view/components/profiler/flamegraph/testHelpers";

src/adapter/protocol/string-table.test.ts

@@ -5,7 +5,7 @@ import {
 	parseTable,
 	flushTable,
 } from "./string-table";
-import { expect } from "chai";
+import { expect } from "vitest";
 
 describe("StringTable", () => {
 	describe("flushTable", () => {

src/adapter/shared/renderer.test.tsx

@@ -2,7 +2,7 @@ import { h, render, Options, options, Fragment, Component } from "preact";
 import * as sinon from "sinon";
 import { createRenderer } from "./renderer";
 import { setupOptionsV10 } from "../10/options";
-import { expect } from "chai";
+import { expect } from "vitest";
 import { toSnapshot } from "../debug";
 import { useState } from "preact/hooks";
 import { act } from "preact/test-utils";

src/adapter/shared/serialize.test.tsx

@@ -1,4 +1,4 @@
-import { expect } from "chai";
+import { expect } from "vitest";
 import { cleanContext, cleanProps, jsonify } from "./serialize";
 import { h, Component, createContext, render } from "preact";
 import { teardown } from "preact/test-utils";

src/adapter/shared/update.test.ts

@@ -1,4 +1,4 @@
-import { expect } from "chai";
+import { expect } from "vitest";
 import { setInCopy } from "./serialize";
 
 describe("setInCopy", () => {

src/adapter/shared/utils.test.ts

@@ -1,4 +1,4 @@
-import { expect } from "chai";
+import { expect } from "vitest";
 import { sortRoots } from "./utils";
 
 const div = (id: string) => {

src/adapter/store.test.ts

@@ -1,6 +1,6 @@
 import { createStore } from "../view/store";
 import { applyOperationsV2 } from "./protocol/events";
-import { expect } from "chai";
+import { expect } from "vitest";
 import { fromSnapshot } from "./debug";
 import * as sinon from "sinon";
 import { effect } from "@preact/signals";

src/view/components/DataInput/index.tsx

@@ -117,7 +117,7 @@ export function DataInput({
 				<input
 					type="text"
 					ref={ref}
-					class={`${s.valueInput} ${props.class || ""} ${focus ? s.focus : ""}`}
+					class={`${s.valueInput} ${props.class || ""}`}
 					value={value === undefined ? "" : value}
 					onKeyUp={onKeyUp}
 					onInput={onInput}

src/view/components/DataInput/parseValue.test.ts

@@ -1,4 +1,4 @@
-import { expect } from "chai";
+import { expect } from "vitest";
 import { parseValue, genPreview } from "./parseValue";
 
 describe("parseValue", () => {

src/view/components/FilterPopup/FilterPopup.module.css

@@ -143,3 +143,15 @@
 	width: 3rem;
 	padding: 0.15rem;
 }
+
+.removeWrapper {
+	width: 1.5rem;
+	display: flex;
+	flex: 0 0 auto;
+	justify-content: flex-end;
+}
+
+.vSep {
+	height: 0.0625rem;
+	margin: 0.4rem 0;
+}

src/view/components/elements/TreeView.test.tsx

@@ -1,7 +1,7 @@
 import { h } from "preact";
 import { render } from "@testing-library/preact";
 import { TreeItem } from "./TreeView";
-import { expect } from "chai";
+import { expect } from "vitest";
 import { AppCtx } from "../../store/react-bindings";
 import { createStore } from "../../store";
 import { DevNodeType } from "../../store/types";

src/view/components/profiler/components/CommitTimeline/CommitTimeline.test.tsx

@@ -1,5 +1,5 @@
 import { h, ComponentChild } from "preact";
-import { expect } from "chai";
+import { expect } from "vitest";
 import { CommitTimeline } from "./CommitTimeline";
 import { fireEvent, render } from "@testing-library/preact";
 import * as sinon from "sinon";

src/view/components/profiler/flamegraph/modes/patchTree.test.ts

@@ -1,4 +1,4 @@
-import { expect } from "chai";
+import { expect } from "vitest";
 import { patchTree } from "./patchTree";
 import { flames } from "../testHelpers";
 import { Tree, DevNode, ID } from "../../../../store/types";

src/view/components/profiler/flamegraph/ranked/ranked-utils.test.ts

@@ -1,4 +1,4 @@
-import { expect } from "chai";
+import { expect } from "vitest";
 import { toTransform } from "./ranked-utils";
 import { flames } from "../testHelpers";
 import { NodeTransform } from "../shared";

src/view/components/profiler/flamegraph/testHelpers.test.ts

@@ -1,4 +1,4 @@
-import { expect } from "chai";
+import { expect } from "vitest";
 import { flames } from "./testHelpers";
 import { DevNodeType, DevNode } from "../../../store/types";
 

src/view/components/sidebar/inspect/ElementProps.tsx

@@ -144,7 +144,7 @@ export function SingleItem(props: SingleProps) {
 					<span
 						class={`${s.name} ${
 							props.index === undefined ? s.noCollapse : ""
-						} ${s.nameStatic} ${editable ? s.nameEditable : ""}`}
+						} ${editable ? s.nameEditable : ""}`}
 						data-testid="prop-name"
 						data-type={value !== "__preact_empty__" ? type : "empty"}
 					>

src/view/components/sidebar/inspect/parseProps.test.ts

@@ -1,4 +1,4 @@
-import { expect } from "chai";
+import { expect } from "vitest";
 import { parseProps } from "./parseProps";
 
 const serialize = (v: Map<any, any>) => Array.from(v.values());

src/view/components/sidebar/inspect/serializeProps.test.ts

@@ -1,4 +1,4 @@
-import { expect } from "chai";
+import { expect } from "vitest";
 import { serializeProps } from "./serializeProps";
 
 describe("serializeProps", () => {

src/view/components/tree/windowing.test.ts

@@ -1,4 +1,4 @@
-import { expect } from "chai";
+import { expect } from "vitest";
 import { flattenChildren } from "./windowing";
 import { ID } from "../../store/types";
 
@@ -14,12 +14,7 @@ describe("flattenChildren", () => {
 	it("should flatten tree", () => {
 		const collapsed = new Set<ID>();
 		expect(flattenChildren(tree, 1, id => collapsed.has(id))).to.deep.equal([
-			1,
-			2,
-			4,
-			3,
-			5,
-			6,
+			1, 2, 4, 3, 5, 6,
 		]);
 	});
 });

tools/build.mjs

@@ -104,26 +104,29 @@ async function build(browser) {
 		__DEBUG__: DEBUG,
 		"process.env.BROWSER": JSON.stringify(browser),
 	};
+	const esbuildDefine = {
+		...define,
+		__DEBUG__: JSON.stringify(DEBUG),
+	};
 
-	await esbuild.build({
+	const buildOptions = {
 		bundle: true,
 		sourcemap: false,
 		outdir: dist,
-		watch: args.watch,
 		format: isInline ? "esm" : "iife",
-		define,
+		define: esbuildDefine,
 		external,
 		entryPoints: isInline
 			? {
 					"panel/panel": "src/shells/shared/panel/panel.ts",
 					client: "src/shells/shared/installHook.ts",
-			  }
+				}
 			: {
 					"panel/panel": "src/shells/shared/panel/panel.ts",
 					"background/background": "src/shells/shared/background/background.ts",
 					"content-script": "src/shells/shared/content-script.ts",
 					installHook: "src/shells/shared/installHook.ts",
-			  },
+				},
 		plugins: [
 			cssModules(),
 			babelPlugin(define),
@@ -132,7 +135,7 @@ async function build(browser) {
 					? {
 							"src/shells/shared/panel/panel.html": path.join(dist, "panel"),
 							"src/view/sprite.svg": path.join(dist, "panel"),
-					  }
+						}
 					: {
 							[`src/shells/${browser}/manifest.json`]: dist,
 							"src/shells/shared/panel/empty-panel.html": path.join(
@@ -143,7 +146,7 @@ async function build(browser) {
 							"src/shells/shared/icons": dist,
 							"src/shells/shared/popup/enabled.html": path.join(dist, "popup"),
 							"src/shells/shared/popup/disabled.html": path.join(dist, "popup"),
-					  },
+						},
 			),
 			!isInline &&
 				renamePlugin({
@@ -157,12 +160,19 @@ async function build(browser) {
 					: [
 							path.join(dist, "panel", "panel.html"),
 							path.join(dist, "panel", "empty-panel.html"),
-					  ],
+						],
 			),
 			!isInline && archivePlugin("dist", browser, DEBUG),
 			!isInline && !process.env.CI && gitSourcePlugin(),
 		].filter(Boolean),
-	});
+	};
+
+	if (args.watch) {
+		const ctx = await esbuild.context(buildOptions);
+		await ctx.watch();
+	} else {
+		await esbuild.build(buildOptions);
+	}
 
 	const time = kl.green(`${Date.now() - start}ms`);
 	// eslint-disable-next-line no-console

tools/vitest-setup.ts

@@ -0,0 +1,4 @@
+import { performance } from "node:perf_hooks";
+
+(globalThis as any).performance = performance;
+(globalThis as any).__DEBUG__ = false;

tsconfig.json

@@ -5,8 +5,9 @@
 		"esModuleInterop": true,
 		"target": "ES2020",
 		"strict": true,
-		"jsx": "preserve",
-		"jsxFactory": "h",
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact",
+		"types": ["node", "chrome", "vitest/globals"],
 		"skipLibCheck": true
 	},
 	"include": ["./src/global.d.ts", "./src"]

tsconfig.vitest.json

@@ -0,0 +1,7 @@
+{
+	"extends": "./tsconfig.json",
+	"compilerOptions": {
+		"moduleResolution": "bundler"
+	},
+	"include": ["./vitest.config.ts", "./tools/vitest-setup.ts"]
+}