[chore] Replace mocha with vitest in icons (#7983)

ggdouglas · web-flow · commit 4587c0a7ecf2 · 2026-03-30T16:16:26.000Z
diff --git a/packages/core/src/isotest.test.ts b/packages/core/src/isotest.test.ts
@@ -116,6 +116,10 @@ const config: Record<string, IsomorphicTestConfig> = {
     Popover: {
         children: requiredChild,
     },
+    PopoverNext: {
+        children: requiredChild,
+        className: false,
+    },
     Portal: {
         className: false,
     },
@@ -126,6 +130,9 @@ const config: Record<string, IsomorphicTestConfig> = {
         children: requiredChild,
         className: false,
     },
+    SegmentedControl: {
+        props: { options: [] },
+    },
     TabPanel: {
         skip: true,
     },
diff --git a/packages/icons/package.json b/packages/icons/package.json
@@ -18,9 +18,9 @@
     "scripts": {
         "clean": "rm -rf dist/* || rm -rf lib/**/* || rm -rf src/generated/* || true",
         "compile": "npm-run-all -s \"generate-icon-src\" -p \"compile:*\" -p \"copy:*\"",
-        "compile:esm": "tsc -p ./src",
-        "compile:cjs": "tsc -p ./src -m commonjs --verbatimModuleSyntax false --outDir lib/cjs",
-        "compile:esnext": "tsc -p ./src -t esnext --outDir lib/esnext",
+        "compile:esm": "tsc -p ./src/tsconfig.build.json",
+        "compile:cjs": "tsc -p ./src/tsconfig.build.json -m commonjs --verbatimModuleSyntax false --outDir lib/cjs",
+        "compile:esnext": "tsc -p ./src/tsconfig.build.json -t esnext --outDir lib/esnext",
         "compile:css": "sass-compile ./src",
         "copy:scss": "scripts/copy-scss.sh",
         "copy:fonts": "scripts/copy-fonts.sh",
@@ -33,9 +33,11 @@
         "lint:scss": "sass-lint",
         "lint:es": "es-lint",
         "lint-fix": "es-lint --fix && sass-lint --fix",
-        "test": "run-s test:typeCheck test:iso",
-        "test:typeCheck": "tsc -p ./test",
-        "test:iso": "mocha test/isotest.mjs",
+        "test": "run-s test:typeCheck test:iso test:vitest:run",
+        "test:typeCheck": "tsc -p ./src/tsconfig.test.json",
+        "test:iso": "vitest run --config vitest.config.isotest.mts",
+        "test:vitest": "vitest",
+        "test:vitest:run": "vitest run",
         "verify": "npm-run-all compile -p dist test lint"
     },
     "dependencies": {
@@ -57,11 +59,12 @@
         "@blueprintjs/node-build-scripts": "workspace:^",
         "@blueprintjs/stylelint-plugin": "workspace:^",
         "@blueprintjs/test-commons": "workspace:^",
+        "@testing-library/react": "catalog:",
         "@twbs/fantasticon": "^2.7.2",
+        "@vitejs/plugin-react": "catalog:",
         "@types/handlebars": "^4.1.0",
-        "enzyme": "^3.11.0",
         "handlebars": "^4.7.8",
-        "mocha": "^10.2.0",
+        "vitest": "catalog:",
         "npm-run-all": "^4.1.5",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
diff --git a/packages/icons/src/generatedIcons.test.tsx b/packages/icons/src/generatedIcons.test.tsx
@@ -2,19 +2,20 @@
  * Copyright 2023 Palantir Technologies, Inc. All rights reserved.
  */
 
-import { mount } from "enzyme";
+import { render } from "@testing-library/react";
+import { describe, it } from "vitest";
 
-import { Add } from "../src/generated/components";
+import { Add } from "./generated/components";
 
 describe("<Add> icon component", () => {
     it("allows attaching an event handler", () => {
         const handleClick: React.MouseEventHandler<HTMLSpanElement> = () => undefined;
-        mount(<Add onClick={handleClick} />);
+        render(<Add onClick={handleClick} />);
     });
 
     it("disallows child elements", () => {
         const handleClick: React.MouseEventHandler<HTMLSpanElement> = () => undefined;
-        mount(
+        render(
             <Add onClick={handleClick}>
                 {/* @ts-expect-error */}
                 <path />
diff --git a/packages/icons/src/iconLoader.test.ts b/packages/icons/src/iconLoader.test.ts
@@ -2,8 +2,10 @@
  * Copyright 2023 Palantir Technologies, Inc. All rights reserved.
  */
 
-import { getIconPaths } from "../src/allPaths";
-import { Icons } from "../src/iconLoader";
+import { describe, it } from "vitest";
+
+import { getIconPaths } from "./allPaths";
+import { Icons } from "./iconLoader";
 
 describe("IconLoader", () => {
     it("is compatible with getIconPaths", () => {
diff --git a/packages/icons/src/isotest.test.ts b/packages/icons/src/isotest.test.ts
@@ -1,5 +1,6 @@
 /*
- * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
+ * Copyright 2026 Palantir Technologies, Inc. All rights reserved.
+ *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
  * You may obtain a copy of the License at
@@ -13,24 +14,22 @@
  * limitations under the License.
  */
 
-// @ts-check
-
-import "@blueprintjs/test-commons/bootstrap";
 import { createElement } from "react";
+import { describe } from "vitest";
 
-import { generateIsomorphicTests } from "@blueprintjs/test-commons";
+import { generateIsomorphicTestsVitest } from "@blueprintjs/test-commons";
 
-import Icons from "../lib/cjs/generated/index.js";
+import * as Icons from "./generated/index";
 
 describe("@blueprintjs/icons isomorphic rendering", () => {
-    generateIsomorphicTests(
+    generateIsomorphicTestsVitest(
         Icons,
         {
             SVGIconContainer: {
+                children: createElement("path"),
                 props: {
                     iconName: "add",
                 },
-                children: createElement("path"),
             },
         },
         { excludedSymbols: ["Icons"] },
diff --git a/packages/icons/src/svgIconContainer.test.tsx b/packages/icons/src/svgIconContainer.test.tsx
@@ -2,14 +2,15 @@
  * Copyright 2023 Palantir Technologies, Inc. All rights reserved.
  */
 
-import { mount } from "enzyme";
+import { render } from "@testing-library/react";
+import { describe, it } from "vitest";
 
-import { SVGIconContainer } from "../src/svgIconContainer";
+import { SVGIconContainer } from "./svgIconContainer";
 
 describe("SVGIconContainer", () => {
     it("accepts generic type param specifying the type of the root element", () => {
         const handleClick: React.MouseEventHandler<HTMLSpanElement> = () => undefined;
-        mount(
+        render(
             <SVGIconContainer<HTMLSpanElement> iconName="add" onClick={handleClick}>
                 <path />
             </SVGIconContainer>,
diff --git a/packages/icons/src/tsconfig.build.json b/packages/icons/src/tsconfig.build.json
@@ -0,0 +1,8 @@
+{
+    "extends": "../../../config/tsconfig.web",
+    "compilerOptions": {
+        "composite": true,
+        "outDir": "../lib/esm"
+    },
+    "exclude": ["**/*.test.ts", "**/*.test.tsx", "**/*.test.mts"]
+}
diff --git a/packages/icons/src/tsconfig.json b/packages/icons/src/tsconfig.json
@@ -1,6 +1,4 @@
 {
-    "extends": "../../../config/tsconfig.web",
-    "compilerOptions": {
-        "outDir": "../lib/esm"
-    }
+    "files": [],
+    "references": [{ "path": "./tsconfig.build.json" }, { "path": "./tsconfig.test.json" }]
 }
diff --git a/packages/icons/src/tsconfig.test.json b/packages/icons/src/tsconfig.test.json
@@ -0,0 +1,10 @@
+{
+    "extends": "./tsconfig.build.json",
+    "compilerOptions": {
+        "composite": true,
+        "noEmit": true,
+        "skipLibCheck": true
+    },
+    "include": ["**/*.ts", "**/*.tsx", "**/*.test.ts", "**/*.test.tsx", "**/*.test.mts"],
+    "exclude": []
+}
diff --git a/packages/icons/test/index.ts b/packages/icons/test/index.ts
diff --git a/packages/icons/test/tsconfig.json b/packages/icons/test/tsconfig.json
diff --git a/packages/icons/vitest.config.isotest.mts b/packages/icons/vitest.config.isotest.mts
@@ -0,0 +1,13 @@
+/* !
+ * (c) Copyright 2026 Palantir Technologies Inc. All rights reserved.
+ */
+
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+    test: {
+        name: "icons-iso",
+        environment: "node",
+        include: ["src/isotest.test.ts"],
+    },
+});
diff --git a/packages/icons/vitest.config.mts b/packages/icons/vitest.config.mts
@@ -0,0 +1,17 @@
+/* !
+ * (c) Copyright 2026 Palantir Technologies Inc. All rights reserved.
+ */
+
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+    plugins: [react()],
+    test: {
+        name: "icons",
+        environment: "jsdom",
+        include: ["src/**/*.test.{ts,tsx}"],
+        exclude: ["lib/**", "node_modules/**", "src/isotest.test.ts"],
+        setupFiles: "@blueprintjs/test-commons/vitest-setup-no-enzyme",
+    },
+});
diff --git a/packages/test-commons/src/generateIsomorphicTests.ts b/packages/test-commons/src/generateIsomorphicTests.ts
@@ -2,10 +2,7 @@
  * Copyright 2017 Palantir Technologies, Inc. All rights reserved.
  */
 
-// TODO(#7444): delete assert and Enzyme imports once isomorphic tests are fully migrated to vitest/react-dom
-import { strictEqual } from "assert";
-import Enzyme from "enzyme";
-import { type ComponentClass, createElement, type FC, type ReactNode } from "react";
+import { type ComponentClass, type FC, type ReactNode } from "react";
 
 export function isReactClass(Component: any): Component is ComponentClass<any> {
     return (
@@ -16,11 +13,19 @@ export function isReactClass(Component: any): Component is ComponentClass<any> {
     );
 }
 
-/** Janky heuristic for detecting function components. */
+/** Janky heuristic for detecting function components (including forwardRef). */
 export function isReactFunctionComponent(Component: any, name: string): Component is FC<any> {
-    return (
-        typeof Component === "function" && !isReactClass(Component) && name.charAt(0) === name.charAt(0).toUpperCase()
-    );
+    if (name.charAt(0) !== name.charAt(0).toUpperCase()) {
+        return false;
+    }
+    if (typeof Component === "function" && !isReactClass(Component)) {
+        return true;
+    }
+    // React.forwardRef() returns an object with $$typeof, not a function
+    if (typeof Component === "object" && Component !== null && Component.$$typeof === Symbol.for("react.forward_ref")) {
+        return true;
+    }
+    return false;
 }
 
 export interface IsomorphicTestConfig {
@@ -67,45 +72,3 @@ export function getComponentNames<T extends { [name: string]: any }>(
                     (testFunctionComponents && isReactFunctionComponent(Components[name], name))),
         );
 }
-
-/**
- * Tests that each ComponentClass in Components can be isomorphically rendered on the server.
- *
- * @param Components Namespace import of all components to test.
- * @param config Configuration per component. This is a mapped type supporting all keys in Components.
- * @param options Test generator options.
- */
-export function generateIsomorphicTests<T extends { [name: string]: any }>(
-    Components: T,
-    config: { [P in keyof T]?: IsomorphicTestConfig } = {},
-    options: GenerateIsomorphicTestsOptions = {},
-) {
-    function render(name: string, extraProps?: Record<string, unknown>) {
-        const { children, props }: IsomorphicTestConfig = config[name] || {};
-        const finalProps = extraProps ? { ...props, ...extraProps } : props;
-        // Render to static HTML, just as a server would.
-        // We care merely that `render()` succeeds: it can be server-rendered.
-        // Errors will fail the test and log full stack traces to the console. Nifty!
-        const element = createElement(Components[name], finalProps, children);
-        return Enzyme.render(element);
-    }
-
-    getComponentNames(Components, options).forEach(componentName => {
-        const { className, skip }: IsomorphicTestConfig = config[componentName] || {};
-        if (skip) {
-            it.skip(`<${componentName}>`);
-            return;
-        }
-
-        it(`<${componentName}>`, () => render(componentName));
-        if (className === false) {
-            it.skip(`<${componentName} className>`);
-        } else {
-            it(`<${componentName} className>`, () => {
-                const testClass = "test-test-test";
-                const doc = render(componentName, { className: testClass });
-                strictEqual(doc.find(`.${testClass}`).length + doc.filter(`.${testClass}`).length, 1);
-            });
-        }
-    });
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/vitest.config.mts b/vitest.config.mts
@@ -15,6 +15,7 @@ export default defineConfig({
             "packages/datetime/vitest.config.mts",
             "packages/docs-data/vitest.config.mts",
             "packages/eslint-plugin/vitest.config.mts",
+            "packages/icons/vitest.config.mts",
             "packages/labs/vitest.config.mts",
             "packages/node-build-scripts/vitest.config.mts",
             "packages/select/vitest.config.mts",

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,4 @@`
`1`	`1`	`{`
`2`		`- "extends": "../../../config/tsconfig.web",`
`3`		`- "compilerOptions": {`
`4`		`- "outDir": "../lib/esm"`
`5`		`- }`
	`2`	`+ "files": [],`
	`3`	`+ "references": [{ "path": "./tsconfig.build.json" }, { "path": "./tsconfig.test.json" }]`
`6`	`4`	`}`