tests passing

packages/site/src/components/Editor.tsx

···
 import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
 import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
 
-// Configure loader to use local monaco-editor 0.52.0 instead of CDN 0.54.0
-self.MonacoEnvironment = {
-	getWorker(_: string, label: string) {
-		if (label === "json") {
-			return new jsonWorker();
-		}
-		if (label === "typescript" || label === "javascript") {
-			return new tsWorker();
-		}
-		return new editorWorker();
-	},
-};
+// Configure Monaco Environment for web workers
+if (typeof self !== "undefined") {
+	self.MonacoEnvironment = {
+		getWorker(_: string, label: string) {
+			if (label === "json") {
+				return new jsonWorker();
+			}
+			if (label === "typescript" || label === "javascript") {
+				return new tsWorker();
+			}
+			return new editorWorker();
+		},
+	};
+}
 
-loader.config({ monaco });
+// Configure loader to use local monaco-editor 0.52.0 instead of CDN 0.54.0
+if (loader?.config) {
+	loader.config({ monaco });
+}
 
 interface EditorProps {
 	value: string;
···
 		monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
 			target: monaco.languages.typescript.ScriptTarget.ES2020,
 			allowNonTsExtensions: true,
-			moduleResolution:
-				monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+			moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
 			module: monaco.languages.typescript.ModuleKind.ESNext,
 			noEmit: true,
 			esModuleInterop: true,

packages/site/tests/components/Editor.test.tsx

···
 			onChange={(e) => onChange(e.target.value)}
 		/>
 	),
+	useMonaco: () => ({
+		languages: {
+			typescript: {
+				typescriptDefaults: {
+					setCompilerOptions: vi.fn(),
+					setDiagnosticsOptions: vi.fn(),
+					addExtraLib: vi.fn(),
+				},
+				ScriptTarget: { ES2020: 7 },
+				ModuleResolutionKind: { NodeJs: 2 },
+				ModuleKind: { ESNext: 99 },
+			},
+		},
+	}),
 	loader: {
+		config: vi.fn(),
 		init: vi.fn(() =>
 			Promise.resolve({
 				languages: {

packages/site/tests/components/Playground.test.tsx

···
 			onChange={(e) => onChange(e.target.value)}
 		/>
 	),
-	useMonaco: () => null,
+	useMonaco: () => ({
+		languages: {
+			typescript: {
+				typescriptDefaults: {
+					setCompilerOptions: vi.fn(),
+					setDiagnosticsOptions: vi.fn(),
+					addExtraLib: vi.fn(),
+				},
+				ScriptTarget: { ES2020: 7 },
+				ModuleResolutionKind: { NodeJs: 2 },
+				ModuleKind: { ESNext: 99 },
+			},
+		},
+	}),
 	loader: {
+		config: vi.fn(),
 		init: vi.fn(() =>
 			Promise.resolve({
 				languages: {

packages/site/tests/mocks/monaco-editor.ts

···
+// Mock monaco-editor for tests
+export default {};

packages/site/tests/mocks/worker.ts

···
+// Mock worker for tests
+export default class MockWorker {}

packages/site/tests/setup.ts

···
 import { vi } from "vitest";
 import "@testing-library/jest-dom/vitest";
 
+// Mock @monaco-editor/react BEFORE any imports
+vi.mock("@monaco-editor/react", () => ({
+	default: vi.fn(() => null),
+	useMonaco: vi.fn(() => null),
+	loader: {
+		config: vi.fn(),
+		init: vi.fn(() => Promise.resolve({})),
+	},
+}));
+
 global.fetch = vi.fn(
 	() =>
 		Promise.resolve({
 			text: () => Promise.resolve(""),
 		}) as any,
 );
+
+// Mock MonacoEnvironment
+(global as any).MonacoEnvironment = {
+	getWorker: () => ({}) as any,
+};

packages/site/vitest.config.ts

···
 import { defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
 
+// Plugin to mock monaco-editor workers in tests
+function mockMonacoWorkers() {
+	return {
+		name: "mock-monaco-workers",
+		resolveId(id: string) {
+			if (id.includes("monaco-editor") && id.includes("?worker")) {
+				return id;
+			}
+		},
+		load(id: string) {
+			if (id.includes("monaco-editor") && id.includes("?worker")) {
+				return "export default class MockWorker {}";
+			}
+		},
+	};
+}
+
 export default defineConfig({
-	plugins: [react()],
+	plugins: [
+		react({
+			babel: {
+				plugins: [],
+			},
+		}),
+		mockMonacoWorkers(),
+	],
 	test: {
 		environment: "jsdom",
 		globals: true,
 		setupFiles: ["./tests/setup.ts"],
+	},
+	resolve: {
+		alias: {
+			"monaco-editor": "/Users/tyler/gitspace/prototypey/packages/site/tests/mocks/monaco-editor.ts",
+		},
 	},
 });