test(wtr): mock LWC to validate sanitizeAttribute

wjhsf · wjhsf · commit 967a2c156b9b · 2025-08-26T12:19:49.000-04:00
We can't mock individual methods of ESM modules in the browser,
so we use WTR's import map plugin to redirect all "lwc" imports to a mock file.
The mock file is mostly a re-export.
diff --git a/packages/@lwc/integration-karma/test/api/sanitizeAttribute/index.spec.js b/packages/@lwc/integration-karma/test/api/sanitizeAttribute/index.spec.js
@@ -36,11 +36,10 @@ const scenarios = [
 
 scenarios.forEach(({ type, attrName, tagName, Ctor }) => {
     describe(`${type} ${attrName}`, () => {
-        const originalSanitizeAttribute = LWC.sanitizeAttribute;
-
+        // Spy is created in a mock file and injected with the import map plugin
+        const sanitizeAttributeSpy = LWC.sanitizeAttribute;
         afterEach(() => {
-            // Reset original sanitizer after each test.
-            LWC.sanitizeAttribute = originalSanitizeAttribute;
+            sanitizeAttributeSpy.mockReset();
         });
 
         it('uses the original passthrough sanitizer when not overridden', () => {
@@ -52,8 +51,6 @@ scenarios.forEach(({ type, attrName, tagName, Ctor }) => {
         });
 
         it('receives the right parameters', () => {
-            spyOn(LWC, 'sanitizeAttribute');
-
             const elm = createElement(tagName, { is: Ctor });
             document.body.appendChild(elm);
 
@@ -66,7 +63,7 @@ scenarios.forEach(({ type, attrName, tagName, Ctor }) => {
         });
 
         it('replace the original attribute value with a string', () => {
-            spyOn(LWC, 'sanitizeAttribute').and.returnValue('/bar');
+            sanitizeAttributeSpy.mockReturnValue('/bar');
 
             const elm = createElement(tagName, { is: Ctor });
             document.body.appendChild(elm);
@@ -76,7 +73,7 @@ scenarios.forEach(({ type, attrName, tagName, Ctor }) => {
         });
 
         it('replace the original attribute value with undefined', () => {
-            spyOn(LWC, 'sanitizeAttribute').and.returnValue(undefined);
+            sanitizeAttributeSpy.mockReturnValue(undefined);
 
             const elm = createElement(tagName, { is: Ctor });
             document.body.appendChild(elm);
@@ -105,8 +102,6 @@ booleanTrueScenarios.forEach(({ attrName, tagName, Ctor }) => {
     describe(attrName, () => {
         // For boolean literals (e.g. `<use xlink:href>`), there is no reason to sanitize since it's empty
         it('does not sanitize when used as a boolean-true attribute', () => {
-            spyOn(LWC, 'sanitizeAttribute');
-
             const elm = createElement(tagName, { is: Ctor });
             document.body.appendChild(elm);
 
diff --git a/packages/@lwc/integration-not-karma/configs/base.mjs b/packages/@lwc/integration-not-karma/configs/base.mjs
@@ -1,5 +1,6 @@
 import { join } from 'node:path';
 import { LWC_VERSION } from '@lwc/shared';
+import { importMapsPlugin } from '@web/dev-server-import-maps';
 import * as options from '../helpers/options.mjs';
 
 const pluck = (obj, keys) => Object.fromEntries(keys.map((k) => [k, obj[k]]));
@@ -31,6 +32,7 @@ export default {
     nodeResolve: true,
     rootDir: join(import.meta.dirname, '..'),
     plugins: [
+        importMapsPlugin({ inject: { importMap: { imports: { lwc: './mocks/lwc.mjs' } } } }),
         {
             resolveImport({ source }) {
                 if (source === 'test-utils') {
diff --git a/packages/@lwc/integration-not-karma/configs/integration.mjs b/packages/@lwc/integration-not-karma/configs/integration.mjs
@@ -8,21 +8,12 @@ export default {
         // FIXME: These tests are just symlinks to integration-karma for now so the git diff smaller
         'test/**/*.spec.js',
 
-        // Cannot reassign properties of module
-        '!test/api/sanitizeAttribute/index.spec.js',
-
         // Hacky nonsense highly tailored to Karma
         '!test/custom-elements-registry/index.spec.js',
 
         // Logging mismatches
         '!test/component/LightningElement.addEventListener/index.spec.js',
 
-        // Needs clean <head>
-        '!test/light-dom/multiple-templates/index.spec.js',
-        '!test/light-dom/style-global/index.spec.js',
-        '!test/misc/clean-dom/index.spec.js',
-        '!test/swapping/styles/index.spec.js',
-
         // Implement objectContaining / arrayWithExactContents
         '!test/profiler/mutation-logging/index.spec.js',
     ],
diff --git a/packages/@lwc/integration-not-karma/mocks/lwc.mjs b/packages/@lwc/integration-not-karma/mocks/lwc.mjs
@@ -0,0 +1,6 @@
+// IMPORTANT: we must use @lwc/engine-dom instead of lwc in order to avoid circular imports
+import { sanitizeAttribute as _sanitizeAttribute } from '@lwc/engine-dom';
+import { fn } from '@vitest/spy';
+
+export * from '@lwc/engine-dom';
+export const sanitizeAttribute = fn(_sanitizeAttribute);
diff --git a/packages/@lwc/integration-not-karma/package.json b/packages/@lwc/integration-not-karma/package.json
@@ -15,6 +15,7 @@
         "@lwc/synthetic-shadow": "8.21.1",
         "@types/chai": "^5.2.2",
         "@types/jasmine": "^5.1.8",
+        "@web/dev-server-import-maps": "^0.2.1",
         "@web/dev-server-rollup": "^0.6.4",
         "@web/test-runner": "^0.20.2",
         "chai": "^5.2.1"
diff --git a/yarn.lock b/yarn.lock
@@ -1879,6 +1879,11 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.4.2.tgz#1860473de7dfa1546767448f333db80cb0ff2161"
   integrity sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==
 
+"@import-maps/resolve@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@import-maps/resolve/-/resolve-1.0.1.tgz#1e9fcadcf23aa0822256a329aabca241879d37c9"
+  integrity sha512-tWZNBIS1CoekcwlMuyG2mr0a1Wo5lb5lEHwwWvZo+5GLgr3e9LLDTtmgtCWEwBpXMkxn9D+2W9j2FY6eZQq0tA==
+
 "@inquirer/checkbox@^4.1.9":
   version "4.1.9"
   resolved "https://registry.yarnpkg.com/@inquirer/checkbox/-/checkbox-4.1.9.tgz#431c65a3a1fd289be8102034ece15c91dda1ceec"
@@ -2177,9 +2182,11 @@
 
 "@lwc/eslint-plugin-lwc-internal@link:./scripts/eslint-plugin":
   version "0.0.0"
+  uid ""
 
 "@lwc/test-utils-lwc-internals@link:./scripts/test-utils":
   version "0.0.0"
+  uid ""
 
 "@napi-rs/wasm-runtime@0.2.4":
   version "0.2.4"
@@ -4260,6 +4267,18 @@
     picomatch "^2.2.2"
     ws "^7.5.10"
 
+"@web/dev-server-import-maps@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/@web/dev-server-import-maps/-/dev-server-import-maps-0.2.1.tgz#4b3ab65bb256b7852a1abfe9cdf1b7b129d3d0fa"
+  integrity sha512-iGM7s4qenmTDUWC2iV0HoQ1NR5lAyRxVHOpWzTsFH/TnUZzP+YuL6QIFtB2v2v7URfhGL2l2WPIibmliToITcg==
+  dependencies:
+    "@import-maps/resolve" "^1.0.1"
+    "@types/parse5" "^6.0.1"
+    "@web/dev-server-core" "^0.7.2"
+    "@web/parse5-utils" "^2.1.0"
+    parse5 "^6.0.1"
+    picomatch "^2.2.2"
+
 "@web/dev-server-rollup@^0.6.1", "@web/dev-server-rollup@^0.6.4":
   version "0.6.4"
   resolved "https://registry.yarnpkg.com/@web/dev-server-rollup/-/dev-server-rollup-0.6.4.tgz#d0a4f69e4a659d2b79f172e86236cea6c872e81c"
