test(wtr): clean global state and mock LWC (#5467)

wjhsf · web-flow · commit 47645d8a97c3 · 2025-08-28T14:43:40.000-07:00
* test(wtr): clear &lt;head&gt; and clear global stylesheets when needed

* test(wtr): mock LWC to validate sanitizeAttribute

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.

* chore(deps): bump @types/jasmine
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-karma/test/mixed-shadow-mode/synthetic-behavior/index.spec.js b/packages/@lwc/integration-karma/test/mixed-shadow-mode/synthetic-behavior/index.spec.js
@@ -15,6 +15,10 @@ import GrandparentResetParentAnyChildReset from 'x/grandparentResetParentAnyChil
 import GrandparentResetParentResetChildAny from 'x/grandparentResetParentResetChildAny';
 import GrandparentResetParentResetChildReset from 'x/grandparentResetParentResetChildReset';
 
+afterEach(() => {
+    window.__lwcResetGlobalStylesheets();
+});
+
 describe.skipIf(process.env.NATIVE_SHADOW)('synthetic behavior', () => {
     const scenarios = [
         {
diff --git a/packages/@lwc/integration-karma/test/rendering/style-specificity-important/index.spec.js b/packages/@lwc/integration-karma/test/rendering/style-specificity-important/index.spec.js
@@ -1,6 +1,10 @@
 import { createElement } from 'lwc';
 import Component from 'x/component';
 
+afterEach(() => {
+    window.__lwcResetGlobalStylesheets();
+});
+
 describe('important styling and style override', () => {
     it('should render !important styles correctly', async () => {
         const elm = createElement('x-component', { is: Component });
diff --git a/packages/@lwc/integration-karma/test/shadow-dom/stylesheet/index.spec.js b/packages/@lwc/integration-karma/test/shadow-dom/stylesheet/index.spec.js
@@ -4,6 +4,10 @@ import Parent from 'x/parent';
 import Host from 'x/host';
 import MultiTemplates from 'x/multiTemplates';
 
+afterEach(() => {
+    window.__lwcResetGlobalStylesheets();
+});
+
 describe('shadow encapsulation', () => {
     it('should not style children elements', () => {
         const elm = createElement('x-parent', { is: Parent });
diff --git a/packages/@lwc/integration-karma/test/synthetic-shadow/dom-manual-sharing-nodes/index.spec.js b/packages/@lwc/integration-karma/test/synthetic-shadow/dom-manual-sharing-nodes/index.spec.js
@@ -3,6 +3,10 @@ import { createElement } from 'lwc';
 import Unstyled from 'x/unstyled';
 import Styled from 'x/styled';
 
+afterEach(() => {
+    window.__lwcResetGlobalStylesheets();
+});
+
 describe('dom manual sharing nodes', () => {
     it('has correct styles when sharing nodes from styled to unstyled component', () => {
         const unstyled = createElement('x-unstyled', { is: Unstyled });
diff --git a/packages/@lwc/integration-karma/test/template/directive-lwc-dom-manual/index.spec.js b/packages/@lwc/integration-karma/test/template/directive-lwc-dom-manual/index.spec.js
@@ -8,6 +8,10 @@ function waitForStyleToBeApplied() {
     return Promise.resolve();
 }
 
+afterEach(() => {
+    window.__lwcResetGlobalStylesheets();
+});
+
 describe('dom mutation without the lwc:dom="manual" directive', () => {
     function testErrorOnDomMutation(method, fn) {
         it(`should log a warning when calling ${method} on an element without the lwc:dom="manual" directive only in synthetic mode`, () => {
diff --git a/packages/@lwc/integration-karma/test/template/directive-lwc-inner-html/index.spec.js b/packages/@lwc/integration-karma/test/template/directive-lwc-inner-html/index.spec.js
@@ -7,18 +7,18 @@ let originalSanitizeHtmlContent;
 
 beforeAll(() => {
     originalSanitizeHtmlContent = getHooks().sanitizeHtmlContent;
-    setHooks({
-        sanitizeHtmlContent: (content) => content,
-    });
+    setHooks({ sanitizeHtmlContent: (content) => content });
 });
 
 afterAll(() => {
-    setHooks({
-        sanitizeHtmlContent: originalSanitizeHtmlContent,
-    });
+    setHooks({ sanitizeHtmlContent: originalSanitizeHtmlContent });
+});
+
+afterEach(() => {
+    window.__lwcResetGlobalStylesheets();
 });
 
-it('renders the content as HTML', () => {
+it('renders the content as HTML', async () => {
     const elm = createElement('x-inner-html', { is: XInnerHtml });
     elm.content = 'Hello <b>World</b>';
     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/helpers/setup.mjs b/packages/@lwc/integration-not-karma/helpers/setup.mjs
@@ -106,6 +106,7 @@ hijackGlobal('afterEach', (afterEach) => {
         // FIXME: Boost test speed by moving this to only files that need it
         // Ensure the DOM is in a clean state
         document.body.replaceChildren();
+        document.head.replaceChildren();
     });
 });
 
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.2",
         "@types/chai": "^5.2.2",
         "@types/jasmine": "^5.1.9",
+        "@web/dev-server-import-maps": "^0.2.1",
         "@web/dev-server-rollup": "^0.6.4",
         "@web/test-runner": "^0.20.2",
         "chai": "^6.0.1"
diff --git a/yarn.lock b/yarn.lock
@@ -1811,6 +1811,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"
@@ -3192,6 +3197,11 @@
   resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-5.1.9.tgz#9f00abff2a17687e675ce6669e7b53c9e7d145f0"
   integrity sha512-8t4HtkW4wxiPVedMpeZ63n3vlWxEIquo/zc1Tm8ElU+SqVV7+D3Na2PWaJUp179AzTragMWVwkMv7mvty0NfyQ==
 
+"@types/jasmine@^5.1.9":
+  version "5.1.9"
+  resolved "https://registry.yarnpkg.com/@types/jasmine/-/jasmine-5.1.9.tgz#9f00abff2a17687e675ce6669e7b53c9e7d145f0"
+  integrity sha512-8t4HtkW4wxiPVedMpeZ63n3vlWxEIquo/zc1Tm8ElU+SqVV7+D3Na2PWaJUp179AzTragMWVwkMv7mvty0NfyQ==
+
 "@types/json-schema@^7.0.15":
   version "7.0.15"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
@@ -3943,6 +3953,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"
