refactor: use ES module imports in browser core (#4158)

With these changes a few browser-side core files now use native ES
modules. `Loader`, `MMSocket`, `Module` and `MM` can be imported
directly instead of being read off `window`. `main.js` and `loader.js`
are no longer wrapped in IIFEs - they're just normal modules now.

`Module`, `MM` and `MMSocket` are still exposed as globals, so
third-party modules that use the old API keep working.

The changes are mostly structural, behavior should stay the same. A few
internal helpers in `main.js` got an underscore prefix because their
names clashed with public `MM` methods.

## Why

The old setup relied a lot on script order: a file could use `Loader` or
`MMSocket` only because another script happened to put it on `window`
first. Imports make that explicit.

The bigger goal is to move away from the legacy script-loading patterns
- making it easier to understand and easier to test - in other words:
easier to maintain.

More of the core could be "cleaned up" the same way, but that would blow
up this PR.

For reviewing, I recommend to hide the whitespace changes.

index.html

@@ -51,11 +51,9 @@
     <script type="text/javascript" src="translations/translations.js"></script>
     <script type="text/javascript" src="js/translator.js"></script>
     <script type="text/javascript" src="config/basepath.js"></script>
-    <script type="text/javascript" src="js/module.js"></script>
-    <script type="text/javascript" src="js/loader.js"></script>
-    <script type="text/javascript" src="js/socketclient.js"></script>
     <script type="text/javascript" src="js/animateCSS.js"></script>
     <script type="text/javascript" src="js/positions.js"></script>
-    <script type="text/javascript" src="js/main.js"></script>
+    <script type="module" src="js/module.js"></script>
+    <script type="module" src="js/main.js"></script>
   </body>
 </html>

js/loader.js

@@ -1,298 +1,292 @@
 /* global defaultModules, vendor */
 
-const Loader = (function () {
+/* Module state */
 
-	/* Create helper variables */
+const loadedModuleFiles = [];
+const loadedFiles = [];
+const moduleObjects = [];
 
-	const loadedModuleFiles = [];
-	const loadedFiles = [];
-	const moduleObjects = [];
-
-	/* Private Methods */
-
-	/**
-	 * Get environment variables from config.
-	 * @returns {object} Env vars with modulesDir and customCss paths from config.
-	 */
-	const getEnvVarsFromConfig = function () {
-		return {
-			modulesDir: config.foreignModulesDir || "modules",
-			defaultModulesDir: config.defaultModulesDir || "defaultmodules",
-			customCss: config.customCss || "config/custom.css"
-		};
+/**
+ * Get environment variables from config.
+ * @returns {object} Env vars with modulesDir and customCss paths from config.
+ */
+function getEnvVarsFromConfig () {
+	return {
+		modulesDir: config.foreignModulesDir || "modules",
+		defaultModulesDir: config.defaultModulesDir || "defaultmodules",
+		customCss: config.customCss || "config/custom.css"
 	};
+}
 
-	/**
-	 * Retrieve object of env variables.
-	 * @returns {object} with key: values as assembled in js/server_functions.js
-	 */
-	const getEnvVars = async function () {
-		// In test mode, skip server fetch and use config values directly
-		if (typeof process !== "undefined" && process.env && process.env.mmTestMode === "true") {
-			return getEnvVarsFromConfig();
-		}
+/**
+ * Retrieve object of env variables.
+ * @returns {object} with key: values as assembled in js/server_functions.js
+ */
+async function getEnvVars () {
+	// In test mode, skip server fetch and use config values directly
+	if (typeof process !== "undefined" && process.env && process.env.mmTestMode === "true") {
+		return getEnvVarsFromConfig();
+	}
 
-		// In production, fetch env vars from server
+	// In production, fetch env vars from server
+	try {
+		const res = await fetch(new URL("env", `${location.origin}${config.basePath}`));
+		return JSON.parse(await res.text());
+	} catch (error) {
+		// Fallback to config values if server fetch fails
+		Log.error("Unable to retrieve env configuration", error);
+		return getEnvVarsFromConfig();
+	}
+}
+
+/**
+ * Loops through all modules and requests start for every module.
+ */
+async function startModules () {
+	const modulePromises = [];
+	for (const module of moduleObjects) {
 		try {
-			const res = await fetch(new URL("env", `${location.origin}${config.basePath}`));
-			return JSON.parse(await res.text());
+			modulePromises.push(module.start());
 		} catch (error) {
-			// Fallback to config values if server fetch fails
-			Log.error("Unable to retrieve env configuration", error);
-			return getEnvVarsFromConfig();
+			Log.error(`Error when starting node_helper for module ${module.name}:`);
+			Log.error(error);
 		}
-	};
+	}
 
-	/**
-	 * Loops through all modules and requests start for every module.
-	 */
-	const startModules = async function () {
-		const modulePromises = [];
-		for (const module of moduleObjects) {
-			try {
-				modulePromises.push(module.start());
-			} catch (error) {
-				Log.error(`Error when starting node_helper for module ${module.name}:`);
-				Log.error(error);
-			}
+	const results = await Promise.allSettled(modulePromises);
+
+	// Log errors that happened during async node_helper startup
+	results.forEach((result) => {
+		if (result.status === "rejected") {
+			Log.error(result.reason);
 		}
+	});
 
-		const results = await Promise.allSettled(modulePromises);
+	// Notify core of loaded modules.
+	MM.modulesStarted(moduleObjects);
 
-		// Log errors that happened during async node_helper startup
-		results.forEach((result) => {
-			if (result.status === "rejected") {
-				Log.error(result.reason);
-			}
-		});
-
-		// Notify core of loaded modules.
-		MM.modulesStarted(moduleObjects);
-
-		// Starting modules also hides any modules that have requested to be initially hidden
-		for (const thisModule of moduleObjects) {
-			if (thisModule.data.hiddenOnStartup) {
-				Log.info(`Initially hiding ${thisModule.name}`);
-				thisModule.hide();
-			}
+	// Starting modules also hides any modules that have requested to be initially hidden
+	for (const thisModule of moduleObjects) {
+		if (thisModule.data.hiddenOnStartup) {
+			Log.info(`Initially hiding ${thisModule.name}`);
+			thisModule.hide();
 		}
-	};
+	}
+}
 
-	/**
-	 * Retrieve list of all modules.
-	 * @returns {object[]} module data as configured in config
-	 */
-	const getAllModules = function () {
-		const AllModules = config.modules.filter((module) => (module.module !== undefined) && (MM.getAvailableModulePositions.indexOf(module.position) > -1 || typeof (module.position) === "undefined"));
-		return AllModules;
-	};
+/**
+ * Retrieve list of all modules.
+ * @returns {object[]} module data as configured in config
+ */
+function getAllModules () {
+	const AllModules = config.modules.filter((module) => (module.module !== undefined) && (MM.getAvailableModulePositions.indexOf(module.position) > -1 || typeof (module.position) === "undefined"));
+	return AllModules;
+}
 
-	/**
-	 * Generate array with module information including module paths.
-	 * @returns {object[]} Module information.
-	 */
-	const getModuleData = async function () {
-		const modules = getAllModules();
-		const moduleFiles = [];
-		const envVars = await getEnvVars();
+/**
+ * Generate array with module information including module paths.
+ * @returns {object[]} Module information.
+ */
+async function getModuleData () {
+	const modules = getAllModules();
+	const moduleFiles = [];
+	const envVars = await getEnvVars();
 
-		modules.forEach(function (moduleData, index) {
-			const module = moduleData.module;
+	modules.forEach(function (moduleData, index) {
+		const module = moduleData.module;
 
-			const elements = module.split("/");
-			const moduleName = elements[elements.length - 1];
-			let moduleFolder = `${envVars.modulesDir}/${module}`;
+		const elements = module.split("/");
+		const moduleName = elements[elements.length - 1];
+		let moduleFolder = `${envVars.modulesDir}/${module}`;
 
-			if (defaultModules.indexOf(moduleName) !== -1) {
-				const defaultModuleFolder = `${envVars.defaultModulesDir}/${module}`;
-				if (window.name !== "jsdom") {
+		if (defaultModules.indexOf(moduleName) !== -1) {
+			const defaultModuleFolder = `${envVars.defaultModulesDir}/${module}`;
+			if (window.name !== "jsdom") {
+				moduleFolder = defaultModuleFolder;
+			} else {
+				// running in test mode, allow defaultModules placed under moduleDir for testing
+				if (envVars.modulesDir === "modules") {
 					moduleFolder = defaultModuleFolder;
-				} else {
-					// running in test mode, allow defaultModules placed under moduleDir for testing
-					if (envVars.modulesDir === "modules") {
-						moduleFolder = defaultModuleFolder;
-					}
 				}
 			}
-
-			if (moduleData.disabled === true) {
-				return;
-			}
-
-			moduleFiles.push({
-				index: index,
-				identifier: `module_${index}_${module}`,
-				name: moduleName,
-				path: `${moduleFolder}/`,
-				file: `${moduleName}.js`,
-				position: moduleData.position,
-				animateIn: moduleData.animateIn,
-				animateOut: moduleData.animateOut,
-				hiddenOnStartup: moduleData.hiddenOnStartup,
-				header: moduleData.header,
-				configDeepMerge: typeof moduleData.configDeepMerge === "boolean" ? moduleData.configDeepMerge : false,
-				config: moduleData.config,
-				classes: typeof moduleData.classes !== "undefined" ? `${moduleData.classes} ${module}` : module,
-				order: (typeof moduleData.order === "number" && Number.isInteger(moduleData.order)) ? moduleData.order : 0
-			});
-		});
-
-		return moduleFiles;
-	};
-
-	/**
-	 * Load modules via ajax request and create module objects.
-	 * @param {object} module Information about the module we want to load.
-	 * @returns {Promise<void>} resolved when module is loaded
-	 */
-	const loadModule = async function (module) {
-		const url = module.path + module.file;
-
-		/**
-		 * @returns {Promise<void>}
-		 */
-		const afterLoad = async function () {
-			const moduleObject = Module.create(module.name);
-			if (moduleObject) {
-				await bootstrapModule(module, moduleObject);
-			}
-		};
-
-		if (loadedModuleFiles.indexOf(url) !== -1) {
-			await afterLoad();
-		} else {
-			await loadFile(url);
-			loadedModuleFiles.push(url);
-			await afterLoad();
 		}
-	};
+
+		if (moduleData.disabled === true) {
+			return;
+		}
+
+		moduleFiles.push({
+			index: index,
+			identifier: `module_${index}_${module}`,
+			name: moduleName,
+			path: `${moduleFolder}/`,
+			file: `${moduleName}.js`,
+			position: moduleData.position,
+			animateIn: moduleData.animateIn,
+			animateOut: moduleData.animateOut,
+			hiddenOnStartup: moduleData.hiddenOnStartup,
+			header: moduleData.header,
+			configDeepMerge: typeof moduleData.configDeepMerge === "boolean" ? moduleData.configDeepMerge : false,
+			config: moduleData.config,
+			classes: typeof moduleData.classes !== "undefined" ? `${moduleData.classes} ${module}` : module,
+			order: (typeof moduleData.order === "number" && Number.isInteger(moduleData.order)) ? moduleData.order : 0
+		});
+	});
+
+	return moduleFiles;
+}
+
+/**
+ * Load modules via ajax request and create module objects.
+ * @param {object} module Information about the module we want to load.
+ * @returns {Promise<void>} resolved when module is loaded
+ */
+async function loadModule (module) {
+	const url = module.path + module.file;
 
 	/**
-	 * Bootstrap modules by setting the module data and loading the scripts & styles.
-	 * @param {object} module Information about the module we want to load.
-	 * @param {Module} mObj Modules instance.
+	 * @returns {Promise<void>}
 	 */
-	const bootstrapModule = async function (module, mObj) {
-		Log.info(`Bootstrapping module: ${module.name}`);
-		mObj.setData(module);
+	async function afterLoad () {
+		const moduleObject = Module.create(module.name);
+		if (moduleObject) {
+			await bootstrapModule(module, moduleObject);
+		}
+	}
 
-		await mObj.loadScripts();
-		Log.log(`Scripts loaded for: ${module.name}`);
+	if (loadedModuleFiles.indexOf(url) !== -1) {
+		await afterLoad();
+	} else {
+		await loadFile(url);
+		loadedModuleFiles.push(url);
+		await afterLoad();
+	}
+}
 
-		await mObj.loadStyles();
-		Log.log(`Styles loaded for: ${module.name}`);
+/**
+ * Bootstrap modules by setting the module data and loading the scripts & styles.
+ * @param {object} module Information about the module we want to load.
+ * @param {Module} mObj Modules instance.
+ */
+async function bootstrapModule (module, mObj) {
+	Log.info(`Bootstrapping module: ${module.name}`);
+	mObj.setData(module);
 
-		await mObj.loadTranslations();
-		Log.log(`Translations loaded for: ${module.name}`);
+	await mObj.loadScripts();
+	Log.log(`Scripts loaded for: ${module.name}`);
 
-		moduleObjects.push(mObj);
-	};
+	await mObj.loadStyles();
+	Log.log(`Styles loaded for: ${module.name}`);
+
+	await mObj.loadTranslations();
+	Log.log(`Translations loaded for: ${module.name}`);
+
+	moduleObjects.push(mObj);
+}
+
+/**
+ * Load a script or stylesheet by adding it to the dom.
+ * @param {string} fileName Path of the file we want to load.
+ * @returns {Promise} resolved when the file is loaded
+ */
+function loadFile (fileName) {
+	const extension = fileName.slice((Math.max(0, fileName.lastIndexOf(".")) || Infinity) + 1);
+	let script, stylesheet;
+
+	switch (extension.toLowerCase()) {
+		case "js":
+			return new Promise((resolve) => {
+				Log.log(`Load script: ${fileName}`);
+				script = document.createElement("script");
+				script.type = "text/javascript";
+				script.src = fileName;
+				script.onload = function () {
+					resolve();
+				};
+				script.onerror = function () {
+					Log.error("Error on loading script:", fileName);
+					script.remove();
+					resolve();
+				};
+				document.getElementsByTagName("body")[0].appendChild(script);
+			});
+		case "css":
+			return new Promise((resolve) => {
+				Log.log(`Load stylesheet: ${fileName}`);
+
+				stylesheet = document.createElement("link");
+				stylesheet.rel = "stylesheet";
+				stylesheet.type = "text/css";
+				stylesheet.href = fileName;
+				stylesheet.onload = function () {
+					resolve();
+				};
+				stylesheet.onerror = function () {
+					Log.error("Error on loading stylesheet:", fileName);
+					stylesheet.remove();
+					resolve();
+				};
+				document.getElementsByTagName("head")[0].appendChild(stylesheet);
+			});
+	}
+}
+
+/* Public Methods */
+
+export const Loader = {
 
 	/**
-	 * Load a script or stylesheet by adding it to the dom.
+	 * Load all modules as defined in the config.
+	 */
+	async loadModules () {
+		const moduleData = await getModuleData();
+		const envVars = await getEnvVars();
+		const customCss = envVars.customCss;
+
+		// Load all modules
+		for (const module of moduleData) {
+			await loadModule(module);
+		}
+
+		// Load custom.css
+		// Since this happens after loading the modules,
+		// it overwrites the default styles.
+		await loadFile(customCss);
+
+		// Start all modules.
+		await startModules();
+	},
+
+	/**
+	 * Load a file (script or stylesheet).
+	 * Prevent double loading and search for files defined in js/vendor.js.
 	 * @param {string} fileName Path of the file we want to load.
+	 * @param {Module} module The module that calls the loadFile function.
 	 * @returns {Promise} resolved when the file is loaded
 	 */
-	const loadFile = function (fileName) {
-		const extension = fileName.slice((Math.max(0, fileName.lastIndexOf(".")) || Infinity) + 1);
-		let script, stylesheet;
-
-		switch (extension.toLowerCase()) {
-			case "js":
-				return new Promise((resolve) => {
-					Log.log(`Load script: ${fileName}`);
-					script = document.createElement("script");
-					script.type = "text/javascript";
-					script.src = fileName;
-					script.onload = function () {
-						resolve();
-					};
-					script.onerror = function () {
-						Log.error("Error on loading script:", fileName);
-						script.remove();
-						resolve();
-					};
-					document.getElementsByTagName("body")[0].appendChild(script);
-				});
-			case "css":
-				return new Promise((resolve) => {
-					Log.log(`Load stylesheet: ${fileName}`);
-
-					stylesheet = document.createElement("link");
-					stylesheet.rel = "stylesheet";
-					stylesheet.type = "text/css";
-					stylesheet.href = fileName;
-					stylesheet.onload = function () {
-						resolve();
-					};
-					stylesheet.onerror = function () {
-						Log.error("Error on loading stylesheet:", fileName);
-						stylesheet.remove();
-						resolve();
-					};
-					document.getElementsByTagName("head")[0].appendChild(stylesheet);
-				});
+	loadFileForModule (fileName, module) {
+		if (loadedFiles.indexOf(fileName.toLowerCase()) !== -1) {
+			Log.log(`File already loaded: ${fileName}`);
+			return Promise.resolve();
 		}
-	};
 
-	/* Public Methods */
-	return {
-
-		/**
-		 * Load all modules as defined in the config.
-		 */
-		async loadModules () {
-			const moduleData = await getModuleData();
-			const envVars = await getEnvVars();
-			const customCss = envVars.customCss;
-
-			// Load all modules
-			for (const module of moduleData) {
-				await loadModule(module);
-			}
-
-			// Load custom.css
-			// Since this happens after loading the modules,
-			// it overwrites the default styles.
-			await loadFile(customCss);
-
-			// Start all modules.
-			await startModules();
-		},
-
-		/**
-		 * Load a file (script or stylesheet).
-		 * Prevent double loading and search for files defined in js/vendor.js.
-		 * @param {string} fileName Path of the file we want to load.
-		 * @param {Module} module The module that calls the loadFile function.
-		 * @returns {Promise} resolved when the file is loaded
-		 */
-		loadFileForModule (fileName, module) {
-			if (loadedFiles.indexOf(fileName.toLowerCase()) !== -1) {
-				Log.log(`File already loaded: ${fileName}`);
-				return Promise.resolve();
-			}
-
-			if (fileName.indexOf("http://") === 0 || fileName.indexOf("https://") === 0 || fileName.indexOf("/") !== -1) {
-				// This is an absolute or relative path.
-				// Load it and then return.
-				loadedFiles.push(fileName.toLowerCase());
-				return loadFile(fileName);
-			}
-
-			if (vendor[fileName] !== undefined) {
-				// This file is defined in js/vendor.js.
-				// Load it from its location.
-				loadedFiles.push(fileName.toLowerCase());
-				return loadFile(`${vendor[fileName]}`);
-			}
-
-			// File not loaded yet.
-			// Load it based on the module path.
+		if (fileName.indexOf("http://") === 0 || fileName.indexOf("https://") === 0 || fileName.indexOf("/") !== -1) {
+			// This is an absolute or relative path.
+			// Load it and then return.
 			loadedFiles.push(fileName.toLowerCase());
-			return loadFile(module.file(fileName));
+			return loadFile(fileName);
 		}
-	};
-}());
 
-globalThis.Loader = Loader;
+		if (vendor[fileName] !== undefined) {
+			// This file is defined in js/vendor.js.
+			// Load it from its location.
+			loadedFiles.push(fileName.toLowerCase());
+			return loadFile(`${vendor[fileName]}`);
+		}
+
+		// File not loaded yet.
+		// Load it based on the module path.
+		loadedFiles.push(fileName.toLowerCase());
+		return loadFile(module.file(fileName));
+	}
+};

js/module.js

@@ -1,10 +1,15 @@
-/* global Loader, MMSocket, nunjucks */
+/* global nunjucks */
+
+// eslint-disable-next-line import-x/extensions
+import { Loader } from "./loader.js";
+// eslint-disable-next-line import-x/extensions
+import { MMSocket } from "./socketclient.js";
 
 /*
  * Module Blueprint.
  * @typedef {Object} Module
  */
-class Module {
+export class Module {
 
 	/**
 	 * Initializes per-instance mutable state.
@@ -412,6 +417,8 @@ class Module {
 	}
 }
 
+globalThis.Module = Module;
+
 /**
  * Merging MagicMirror² (or other) default/config script by `@bugsounet`
  * Merge 2 objects or/with array
@@ -499,8 +506,6 @@ Module.register = function (name, moduleDefinition) {
 	Module.definitions[name] = moduleDefinition;
 };
 
-window.Module = Module;
-
 /**
  * Compare two semantic version numbers and return the difference.
  * @param {string} a Version number a.
@@ -508,7 +513,7 @@ window.Module = Module;
  * @returns {number} A positive number if a is larger than b, a negative
  * number if a is smaller and 0 if they are the same
  */
-function cmpVersions (a, b) {
+export function cmpVersions (a, b) {
 	const regExStrip0 = /(\.0+)+$/;
 	const segmentsA = a.replace(regExStrip0, "").split(".");
 	const segmentsB = b.replace(regExStrip0, "").split(".");
@@ -528,7 +533,7 @@ function cmpVersions (a, b) {
  * @param {object} obj Object to be cloned
  * @returns {object} the cloned object
  */
-function cloneObject (obj) {
+export function cloneObject (obj) {
 	if (obj === null || typeof obj !== "object") {
 		return obj;
 	}

js/socketclient.js

@@ -1,6 +1,6 @@
 /* global io */
 
-const MMSocket = function (moduleName) {
+export const MMSocket = function (moduleName) {
 	if (typeof moduleName !== "string") {
 		throw new Error("Please set the module name for the MMSocket.");
 	}
@@ -45,4 +45,5 @@ const MMSocket = function (moduleName) {
 	};
 };
 
-globalThis.MMSocket = MMSocket;
+// Legacy global bridge for third-party modules that reference MMSocket directly.
+if (!globalThis.MMSocket) globalThis.MMSocket = MMSocket;

tests/e2e/translations_spec.js

@@ -1,5 +1,6 @@
 const fs = require("node:fs");
 const path = require("node:path");
+const { pathToFileURL } = require("node:url");
 const helmet = require("helmet");
 const { JSDOM } = require("jsdom");
 const express = require("express");
@@ -54,23 +55,47 @@ describe("translations", () => {
 	describe("loadTranslations", () => {
 		let dom;
 
-		beforeEach(() => {
+		beforeEach(async () => {
 			// Create a new translation test environment for each test
 			const env = createTranslationTestEnvironment();
 			const window = env.window;
 
-			// Load module.js content directly for loadTranslations tests
-			const moduleJs = fs.readFileSync(path.join(__dirname, "..", "..", "js", "module.js"), "utf-8");
+			// Bridge JSDOM globals to Node.js so module.js (ES module) can access them
+			global.Log = window.Log;
+			global.Translator = window.Translator;
+			global.config = { language: "de" };
+			global.window = { name: "", mmVersion: "2.0.0" };
+			global.MM = { hideModule: () => {}, showModule: () => {}, sendNotification: () => {}, updateDom: () => {} };
+			global.nunjucks = {
+				Environment () {
+					this.addFilter = () => {};
+					this.renderString = () => "";
+					this.render = (_t, _d, cb) => cb(null, "");
+				},
+				WebLoader () {},
+				runtime: { markSafe: (str) => str }
+			};
 
-			// Execute the script in the JSDOM context
-			window.eval(moduleJs);
+			// Import Module directly — eval can't handle ES module syntax
+			const modulePath = pathToFileURL(path.join(__dirname, "..", "..", "js", "module.js")).href;
+			const { Module } = await import(`${modulePath}?test=${Date.now()}`);
+			window.Module = Module;
 
-			// Additional setup for loadTranslations tests
-			window.config = { language: "de" };
+			// Expose config on window so tests can modify dom.window.config
+			window.config = global.config;
 
 			dom = { window };
 		});
 
+		afterEach(() => {
+			delete global.Log;
+			delete global.Translator;
+			delete global.config;
+			delete global.window;
+			delete global.MM;
+			delete global.nunjucks;
+		});
+
 		it("should load translation file", async () => {
 			const { Translator, Module, config } = dom.window;
 			config.language = "en";

tests/unit/classes/module_spec.js

@@ -1,26 +1,64 @@
 const path = require("node:path");
-const { JSDOM } = require("jsdom");
+const { pathToFileURL } = require("node:url");
 
 describe("File js/module (cloneObject)", () => {
 	describe("Test function cloneObject", () => {
 		let clone;
 		let Module;
-		let dom;
+		let originalWindow;
+		let originalLog;
+		let originalConfig;
+		let originalMM;
+		let originalTranslator;
+		let originalNunjucks;
 
-		beforeAll(() => {
-			return new Promise((done) => {
-				dom = new JSDOM(
-					`<script>var Log = {log: () => {}, info: () => {}, warn: () => {}, error: () => {}, debug: () => {}};</script>\
-					<script src="file://${path.join(__dirname, "..", "..", "..", "js", "module.js")}">`,
-					{ runScripts: "dangerously", resources: "usable" }
-				);
-				dom.window.onload = () => {
-					const { cloneObject, Module: LoadedModule } = dom.window;
-					clone = cloneObject;
-					Module = LoadedModule;
-					done();
-				};
-			});
+		beforeAll(async () => {
+			originalWindow = global.window;
+			originalLog = global.Log;
+			originalConfig = global.config;
+			originalMM = global.MM;
+			originalTranslator = global.Translator;
+			originalNunjucks = global.nunjucks;
+
+			global.window = { mmVersion: "2.0.0" };
+			global.Log = { log: () => {}, info: () => {}, warn: () => {}, error: () => {}, debug: () => {} };
+			global.config = { language: "en" };
+			global.MM = {
+				hideModule: () => {},
+				showModule: () => {},
+				sendNotification: () => {},
+				updateDom: () => {}
+			};
+			global.Translator = {
+				load: () => Promise.resolve(),
+				translate: () => ""
+			};
+			global.nunjucks = {
+				Environment () {
+					this.addFilter = () => {};
+					this.renderString = () => "";
+					this.render = (_template, _data, callback) => callback(null, "");
+				},
+				WebLoader () {},
+				runtime: {
+					markSafe: (str) => str
+				}
+			};
+
+			const modulePath = pathToFileURL(path.join(__dirname, "..", "..", "..", "js", "module.js")).href;
+			const loaded = await import(`${modulePath}?test=${Date.now()}`);
+
+			clone = loaded.cloneObject;
+			Module = loaded.Module;
+		});
+
+		afterAll(() => {
+			global.window = originalWindow;
+			global.Log = originalLog;
+			global.config = originalConfig;
+			global.MM = originalMM;
+			global.Translator = originalTranslator;
+			global.nunjucks = originalNunjucks;
 		});
 
 		it("should clone object", () => {
@@ -137,11 +175,11 @@ describe("File js/module (cloneObject)", () => {
 			let info;
 
 			beforeEach(() => {
-				info = dom.window.Log.info;
+				info = global.Log.info;
 			});
 
 			afterEach(() => {
-				dom.window.Log.info = info;
+				global.Log.info = info;
 				Module.definitions = {};
 			});
 
@@ -181,7 +219,7 @@ describe("File js/module (cloneObject)", () => {
 				const moduleName = "MMM-TestSuperCall";
 				let loggedMessage;
 
-				dom.window.Log.info = (message) => {
+				global.Log.info = (message) => {
 					loggedMessage = message;
 				};
 

tests/unit/functions/cmp_versions_spec.js

@@ -1,22 +1,60 @@
 const path = require("node:path");
-const { JSDOM } = require("jsdom");
+const { pathToFileURL } = require("node:url");
 
 describe("Test function cmpVersions in js/module.js", () => {
 	let cmp;
+	let originalWindow;
+	let originalLog;
+	let originalConfig;
+	let originalMM;
+	let originalTranslator;
+	let originalNunjucks;
 
-	beforeAll(() => {
-		return new Promise((done) => {
-			const dom = new JSDOM(
-				`<script>var Class = {extend: () => { return {}; }};</script>\
-				<script src="file://${path.join(__dirname, "..", "..", "..", "js", "module.js")}">`,
-				{ runScripts: "dangerously", resources: "usable" }
-			);
-			dom.window.onload = () => {
-				const { cmpVersions } = dom.window;
-				cmp = cmpVersions;
-				done();
-			};
-		});
+	beforeAll(async () => {
+		originalWindow = global.window;
+		originalLog = global.Log;
+		originalConfig = global.config;
+		originalMM = global.MM;
+		originalTranslator = global.Translator;
+		originalNunjucks = global.nunjucks;
+
+		global.window = { mmVersion: "2.0.0" };
+		global.Log = { log: () => {}, info: () => {}, warn: () => {}, error: () => {}, debug: () => {} };
+		global.config = { language: "en" };
+		global.MM = {
+			hideModule: () => {},
+			showModule: () => {},
+			sendNotification: () => {},
+			updateDom: () => {}
+		};
+		global.Translator = {
+			load: () => Promise.resolve(),
+			translate: () => ""
+		};
+		global.nunjucks = {
+			Environment () {
+				this.addFilter = () => {};
+				this.renderString = () => "";
+				this.render = (_template, _data, callback) => callback(null, "");
+			},
+			WebLoader () {},
+			runtime: {
+				markSafe: (str) => str
+			}
+		};
+
+		const modulePath = pathToFileURL(path.join(__dirname, "..", "..", "..", "js", "module.js")).href;
+		const loaded = await import(`${modulePath}?test=${Date.now()}`);
+		cmp = loaded.cmpVersions;
+	});
+
+	afterAll(() => {
+		global.window = originalWindow;
+		global.Log = originalLog;
+		global.config = originalConfig;
+		global.MM = originalMM;
+		global.Translator = originalTranslator;
+		global.nunjucks = originalNunjucks;
 	});
 
 	it("should return -1 when comparing 2.1 to 2.2", () => {