Mock Lucide icons globally

Author: mrubens

webview-ui/jest.config.cjs

@@ -6,7 +6,7 @@ module.exports = {
 	moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
 	transform: { "^.+\\.(ts|tsx)$": ["ts-jest", { tsconfig: { jsx: "react-jsx", module: "ESNext" } }] },
 	testMatch: ["<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}", "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],
-	setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
+	setupFilesAfterEnv: ["<rootDir>/src/setupTests.tsx"],
 	moduleNameMapper: {
 		"\\.(css|less|scss|sass)$": "identity-obj-proxy",
 		"^vscrui$": "<rootDir>/src/__mocks__/vscrui.ts",

webview-ui/src/components/common/__tests__/CodeBlock.test.tsx

@@ -28,22 +28,6 @@ jest.mock("shiki", () => ({
 	},
 }))
 
-// Mock all lucide-react icons with a proxy to handle any icon requested
-jest.mock("lucide-react", () => {
-	return new Proxy(
-		{},
-		{
-			get: function (_obj, prop) {
-				// Return a component factory for any icon that's requested
-				if (prop === "__esModule") {
-					return true
-				}
-				return () => <div data-testid={`${String(prop)}-icon`}>{String(prop)}</div>
-			},
-		},
-	)
-})
-
 // Mock the highlighter utility
 jest.mock("../../../utils/highlighter", () => {
 	const mockHighlighter = {

webview-ui/src/components/modes/__tests__/ModesView.test.tsx

@@ -12,22 +12,6 @@ jest.mock("@src/utils/vscode", () => ({
 	},
 }))
 
-// Mock all lucide-react icons with a proxy to handle any icon requested
-jest.mock("lucide-react", () => {
-	return new Proxy(
-		{},
-		{
-			get: function (_obj, prop) {
-				// Return a component factory for any icon that's requested
-				if (prop === "__esModule") {
-					return true
-				}
-				return () => <div data-testid={`${String(prop)}-icon`}>{String(prop)}</div>
-			},
-		},
-	)
-})
-
 const mockExtensionState = {
 	customModePrompts: {},
 	listApiConfigMeta: [

webview-ui/src/components/settings/__tests__/ContextManagementSettings.test.tsx

@@ -13,20 +13,6 @@ class MockResizeObserver {
 
 global.ResizeObserver = MockResizeObserver
 
-// Mock lucide-react icons - these don't work well in Jest/JSDOM environment
-jest.mock("lucide-react", () => {
-	return {
-		Database: React.forwardRef((props: any, ref: any) => <div ref={ref} data-testid="database-icon" {...props} />),
-		ChevronDown: React.forwardRef((props: any, ref: any) => (
-			<div ref={ref} data-testid="chevron-down-icon" {...props} />
-		)),
-		ChevronUp: React.forwardRef((props: any, ref: any) => (
-			<div ref={ref} data-testid="chevron-up-icon" {...props} />
-		)),
-		Check: React.forwardRef((props: any, ref: any) => <div ref={ref} data-testid="check-icon" {...props} />),
-	}
-})
-
 // Mock translation hook to return the key as the translation
 jest.mock("@/i18n/TranslationContext", () => ({
 	useAppTranslation: () => ({

webview-ui/src/components/settings/__tests__/SettingsView.test.tsx

@@ -10,22 +10,6 @@ import SettingsView from "../SettingsView"
 // Mock vscode API
 jest.mock("@src/utils/vscode", () => ({ vscode: { postMessage: jest.fn() } }))
 
-// Mock all lucide-react icons with a proxy to handle any icon requested
-jest.mock("lucide-react", () => {
-	return new Proxy(
-		{},
-		{
-			get: function (_obj, prop) {
-				// Return a component factory for any icon that's requested
-				if (prop === "__esModule") {
-					return true
-				}
-				return () => <div data-testid={`${String(prop)}-icon`}>{String(prop)}</div>
-			},
-		},
-	)
-})
-
 // Mock ApiConfigManager component
 jest.mock("../ApiConfigManager", () => ({
 	__esModule: true,

webview-ui/src/setupTests.ts renamed to webview-ui/src/setupTests.tsx

@@ -30,3 +30,23 @@ Object.defineProperty(window, "matchMedia", {
 		dispatchEvent: jest.fn(),
 	})),
 })
+
+// Mock lucide-react icons globally using Proxy for dynamic icon handling
+jest.mock("lucide-react", () => {
+	return new Proxy(
+		{},
+		{
+			get: function (_obj, prop) {
+				// Return a component factory for any icon that's requested
+				if (prop === "__esModule") {
+					return true
+				}
+				return (props: any) => (
+					<div {...props} data-testid={`${String(prop)}-icon`}>
+						{String(prop)}
+					</div>
+				)
+			},
+		},
+	)
+})