Shared configs/workflow/cjsresolver (#144)

* use remote packages for incrementing.

* add jsdom

* wait for dom to load

* add tests

* lint

* define package version

* update tests

* [email protected]

* [email protected]

Author: thedannywahl

.github/workflows/deploy-apps.yml

@@ -54,7 +54,7 @@ jobs:
         uses: pnpm/[email protected]          
       - name: Install dependencies
         if: steps.changes.outputs.skip_steps != 'true'
-        run: pnpm i
+        run: pnpm install --prefer-workspace-packages=false
       - name: Build
         if: steps.changes.outputs.skip_steps != 'true'
         run: pnpm build apps

apps/nutritionfacts/package.json

@@ -28,5 +28,5 @@
     "update-cache": "vite-node ./scripts/updateCache.mts"
   },
   "type": "module",
-  "version": "1.5.1"
+  "version": "1.5.2"
 }

apps/nutritionfacts/src/Main.test.tsx

@@ -0,0 +1,105 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import * as React from "react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+// --- Mock react-dom/client for ESM ---
+const renderSpy = vi.fn();
+const createRootMock = vi.fn(() => ({ render: renderSpy }));
+vi.mock("react-dom/client", () => ({ createRoot: createRootMock }));
+
+// Mock InstUISettingsProvider and App
+vi.mock("@instructure/ui", () => ({
+	InstUISettingsProvider: ({ children }: { children: React.ReactNode }) => (
+		<div data-testid="instui-provider">{children}</div>
+	),
+}));
+vi.mock("./App", () => ({
+	default: function App() {
+		return <div data-testid="app" />;
+	},
+}));
+
+declare global {
+	// eslint-disable-next-line no-var
+	var __vite_ssr_module_cache__: Record<string, unknown> | undefined;
+}
+
+describe("main.tsx", () => {
+	let rootElem: HTMLElement | null;
+
+	beforeEach(() => {
+		// Remove cached module to force re-execution for every test
+		const viteCache = globalThis.__vite_ssr_module_cache__;
+		if (typeof viteCache === "object" && viteCache !== null) {
+			Object.keys(viteCache).forEach((key) => {
+				if (key.includes("/main.tsx")) {
+					delete viteCache[key];
+				}
+			});
+		}
+		rootElem = document.createElement("div");
+		rootElem.id = "root";
+		document.body.appendChild(rootElem);
+		renderSpy.mockClear();
+		createRootMock.mockClear();
+	});
+
+	afterEach(() => {
+		const elem = document.getElementById("root");
+		if (elem) elem.remove();
+	});
+
+	it("throws an error if root element is not found", async () => {
+		if (rootElem?.parentNode) {
+			rootElem.parentNode.removeChild(rootElem);
+		}
+		// Remove cached module to force re-execution
+		const viteCache = globalThis.__vite_ssr_module_cache__;
+		if (typeof viteCache === "object" && viteCache !== null) {
+			Object.keys(viteCache).forEach((key) => {
+				if (key.includes("/main.tsx")) {
+					delete viteCache[key];
+				}
+			});
+		}
+		const { mountApp } = await import("./main");
+		expect(() => mountApp()).toThrow("Root element not found");
+	});
+
+	it("calls createRoot with the root element", async () => {
+		const { mountApp } = await import("./main");
+		mountApp();
+		expect(createRootMock).toHaveBeenCalledWith(rootElem);
+	});
+
+	it("renders StrictMode > InstUISettingsProvider > App", async () => {
+		const { mountApp } = await import("./main");
+		mountApp();
+		expect(renderSpy).toHaveBeenCalledTimes(1);
+
+		// Check the rendered tree structure
+		const rendered = renderSpy.mock.calls[0][0];
+		// Should be <StrictMode>
+		expect(React.isValidElement(rendered)).toBe(true);
+		expect(rendered.type).toBe(React.StrictMode);
+
+		// Should contain InstUISettingsProvider
+		const provider = React.Children.only(rendered.props.children);
+		expect(
+			provider.type.name ||
+				provider.type.displayName ||
+				(typeof provider.type === "string" ? provider.type : ""),
+		).toMatch(/InstUISettingsProvider/);
+
+		// Should contain App
+		const app = React.Children.only(provider.props.children);
+		expect(
+			app.type.name ||
+				app.type.displayName ||
+				(typeof app.type === "string" ? app.type : ""),
+		).toMatch(/App/);
+	});
+});

apps/nutritionfacts/src/Main.tsx

@@ -3,18 +3,27 @@ import { StrictMode } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import App from "./App";
 
-const root: HTMLElement =
-	document.getElementById("root") ||
-	((): never => {
-		throw new Error("Root element not found");
-	})();
+const mountApp = () => {
+	const foundRoot = document.getElementById("root");
+	const root: HTMLElement =
+		foundRoot ||
+		(() => {
+			throw new Error("Root element not found");
+		})();
 
-const appRoot: Root = createRoot(root);
+	const appRoot: Root = createRoot(root);
 
-appRoot.render(
-	<StrictMode>
-		<InstUISettingsProvider>
-			<App />
-		</InstUISettingsProvider>
-	</StrictMode>,
-);
+	appRoot.render(
+		<StrictMode>
+			<InstUISettingsProvider>
+				<App />
+			</InstUISettingsProvider>
+		</StrictMode>,
+	);
+};
+
+if (typeof window !== "undefined" && import.meta.env?.MODE !== "test") {
+	mountApp();
+}
+
+export { mountApp };

apps/nutritionfacts/vite.config.mts

@@ -1,4 +1,13 @@
 import baseConfig from "@instructure.ai/shared-configs/react";
 import { defineConfig, mergeConfig } from "vite";
 
-export default mergeConfig(baseConfig, defineConfig({}));
+export default mergeConfig(
+	baseConfig,
+	defineConfig({
+		define: {
+			"import.meta.env.VITE_PACKAGE_VERSION": JSON.stringify(
+				String(process.env.npm_package_version),
+			),
+		},
+	}),
+);

package.json

@@ -12,6 +12,7 @@
     "browserslist": "^4.26.3",
     "istanbul-lib-report": "^3.0.1",
     "istanbul-reports": "^3.2.0",
+    "jsdom": "^27.0.1",
     "lightningcss": "^1.30.2",
     "react-compiler-runtime": "^1.0.0",
     "terser": "^5.44.0",
@@ -22,7 +23,7 @@
     "vitest": "^3.2.4",
     "yaml": "^2.8.1"
   },
-  "version": "1.5.0",
+  "version": "1.5.1",
   "name": "@instructure.ai/shared-configs",
   "packageManager": "[email protected]",
   "private": true,