salesforce · wjhsf · Sep 2, 2025 · Aug 15, 2025 · Aug 26, 2025 · Aug 26, 2025
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);

@@ -1,6 +1,7 @@
 import { join } from 'node:path';
 import { LWC_VERSION } from '@lwc/shared';
-import * as options from '../helpers/options.mjs';
+import { importMapsPlugin } from '@web/dev-server-import-maps';
+import * as options from '../helpers/options.js';
 
 const pluck = (obj, keys) => Object.fromEntries(keys.map((k) => [k, obj[k]]));
 const maybeImport = (file, condition) => (condition ? `await import('${file}');` : '');
@@ -28,13 +29,15 @@ export default {
     // time out before they receive focus. But it also makes the full suite take 3x longer to run...
     // Potential workaround: https://github.com/modernweb-dev/web/issues/2588
     concurrency: 1,
+    filterBrowserLogs: () => false,
     nodeResolve: true,
     rootDir: join(import.meta.dirname, '..'),
     plugins: [
+        importMapsPlugin({ inject: { importMap: { imports: { lwc: './mocks/lwc.js' } } } }),
         {
             resolveImport({ source }) {
                 if (source === 'test-utils') {
-                    return '/helpers/utils.mjs';
+                    return '/helpers/utils.js';
                 } else if (source === 'wire-service') {
                     // To serve files outside the web root (e.g. node_modules in the monorepo root),
                     // @web/dev-server provides this "magic" path. It's hacky of us to use it directly.
@@ -64,7 +67,7 @@ export default {
             ${maybeImport('@lwc/synthetic-shadow', !options.DISABLE_SYNTHETIC)}
             ${maybeImport('@lwc/aria-reflection', options.ENABLE_ARIA_REFLECTION_GLOBAL_POLYFILL)}
             </script>
-            <script type="module" src="./helpers/setup.mjs"></script>
+            <script type="module" src="./helpers/setup.js"></script>
             <script type="module" src="${testFramework}"></script>
           </head>
         </html>`,

@@ -1,7 +1,7 @@
 // Use native shadow by default in hydration tests; MUST be set before imports
 process.env.DISABLE_SYNTHETIC ??= 'true';
-import baseConfig from './base.mjs';
-import hydrationTestPlugin from './plugins/serve-hydration.mjs';
+import baseConfig from './base.js';
+import hydrationTestPlugin from './plugins/serve-hydration.js';
 
 /** @type {import("@web/test-runner").TestRunnerConfig} */
 export default {

@@ -1,5 +1,5 @@
-import baseConfig from './base.mjs';
-import testPlugin from './plugins/serve-integration.mjs';
+import baseConfig from './base.js';
+import testPlugin from './plugins/serve-integration.js';
 
 /** @type {import("@web/test-runner").TestRunnerConfig} */
 export default {
@@ -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',
     ],

@@ -3,7 +3,7 @@ import vm from 'node:vm';
 import fs from 'node:fs/promises';
 import { rollup } from 'rollup';
 import lwcRollupPlugin from '@lwc/rollup-plugin';
-import { DISABLE_STATIC_CONTENT_OPTIMIZATION, ENGINE_SERVER } from '../../helpers/options.mjs';
+import { DISABLE_STATIC_CONTENT_OPTIMIZATION, ENGINE_SERVER } from '../../helpers/options.js';
 const lwcSsr = await (ENGINE_SERVER ? import('@lwc/engine-server') : import('@lwc/ssr-runtime'));
 
 const ROOT_DIR = path.join(import.meta.dirname, '../..');

@@ -7,7 +7,7 @@ import {
     COVERAGE,
     DISABLE_STATIC_CONTENT_OPTIMIZATION,
     DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER,
-} from '../../helpers/options.mjs';
+} from '../../helpers/options.js';
 
 /** Cache reused between each compilation to speed up the compilation time. */
 let cache;

@@ -1,4 +1,4 @@
-import { API_VERSION } from './options.mjs';
+import { API_VERSION } from './options.js';
 
 // These values are based on the API versions in @lwc/shared/api-version
 export const LOWERCASE_SCOPE_TOKENS = API_VERSION >= 59,

@@ -1,6 +1,6 @@
-import { registerConsoleMatchers } from './console.mjs';
-import { registerErrorMatchers } from './errors.mjs';
-import { registerJasmineMatchers } from './jasmine.mjs';
+import { registerConsoleMatchers } from './console.js';
+import { registerErrorMatchers } from './errors.js';
+import { registerJasmineMatchers } from './jasmine.js';
 
 export const registerCustomMatchers = (chai, utils) => {
     registerConsoleMatchers(chai, utils);

@@ -3,8 +3,8 @@ import { JestAsymmetricMatchers, JestChaiExpect, JestExtend } from '@vitest/expe
 import * as chai from 'chai';
 import * as LWC from 'lwc';
 import { spyOn, fn } from '@vitest/spy';
-import { registerCustomMatchers } from './matchers/index.mjs';
-import * as TestUtils from './utils.mjs';
+import { registerCustomMatchers } from './matchers/index.js';
+import * as TestUtils from './utils.js';
 
 // FIXME: As a relic of the Karma tests, some test files rely on the global object,
 // rather than importing from `test-utils`.
@@ -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();
     });
 });
 

@@ -8,9 +8,9 @@ import {
     ariaPropertiesMapping,
     nonPolyfilledAriaProperties,
     nonStandardAriaProperties,
-} from './aria.mjs';
-import { setHooks, getHooks } from './hooks.mjs';
-import { spyConsole } from './console.mjs';
+} from './aria.js';
+import { setHooks, getHooks } from './hooks.js';
+import { spyConsole } from './console.js';
 import {
     DISABLE_OBJECT_REST_SPREAD_TRANSFORMATION,
     ENABLE_ELEMENT_INTERNALS_AND_FACE,
@@ -22,8 +22,8 @@ import {
     USE_COMMENTS_FOR_FRAGMENT_BOOKENDS,
     USE_FRAGMENTS_FOR_LIGHT_DOM_SLOTS,
     USE_LIGHT_DOM_SLOT_FORWARDING,
-} from './constants.mjs';
-import { addTrustedSignal } from './signals.mjs';
+} from './constants.js';
+import { addTrustedSignal } from './signals.js';
 
 // Listen for errors thrown directly by the callback
 function directErrorListener(callback) {

@@ -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);
@@ -2,10 +2,11 @@
     "name": "@lwc/integration-not-karma",
     "private": true,
     "version": "8.21.1",
+    "type": "module",
     "scripts": {
         "start": "web-test-runner --manual",
-        "test": "web-test-runner --config configs/integration.mjs",
-        "test:hydration": "web-test-runner --config configs/hydration.mjs"
+        "test": "web-test-runner --config configs/integration.js",
+        "test:hydration": "web-test-runner --config configs/hydration.js"
     },
     "devDependencies": {
         "@lwc/compiler": "8.21.1",
@@ -14,7 +15,8 @@
         "@lwc/rollup-plugin": "8.21.1",
         "@lwc/synthetic-shadow": "8.21.1",
         "@types/chai": "^5.2.2",
-        "@types/jasmine": "^5.1.8",
+        "@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": "^5.2.1"

@@ -0,0 +1,16 @@
+export default {
+    snapshot(target) {
+        const span = target.shadowRoot.querySelector('span');
+
+        return {
+            span,
+        };
+    },
+    test(elm, snapshot, consoleCalls) {
+        const span = elm.shadowRoot.querySelector('span');
+        expect(span).toBe(snapshot.span);
+
+        expect(consoleCalls.warn).toHaveSize(0);
+        expect(consoleCalls.error).toHaveSize(0);
+    },
+};
@@ -0,0 +1,3 @@
+<template>
+    <span>{foo}<!-- yolo -->{bar}</span>
+</template>
@@ -0,0 +1,6 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    foo = '';
+    bar = '';
+}
@@ -0,0 +1,34 @@
+export default {
+    props: {},
+    snapshot(target) {
+        const first = target.shadowRoot.querySelector('.first');
+        const second = target.shadowRoot.querySelector('.second');
+
+        return {
+            first,
+            second,
+        };
+    },
+    advancedTest(target, { Component, hydrateComponent, consoleSpy, container, selector }) {
+        const snapshotBeforeHydration = this.snapshot(target);
+        hydrateComponent(target, Component, this.props);
+        const hydratedTarget = container.querySelector(selector);
+        const snapshotAfterHydration = this.snapshot(hydratedTarget);
+
+        for (const snapshotKey of Object.keys(snapshotBeforeHydration)) {
+            expect(snapshotBeforeHydration[snapshotKey])
+                .withContext(
+                    `${snapshotKey} should be the same DOM element both before and after hydration`
+                )
+                .toBe(snapshotAfterHydration[snapshotKey]);
+            expect(snapshotBeforeHydration[snapshotKey].childNodes)
+                .withContext(
+                    `${snapshotKey} should have the same number of child nodes before & after hydration`
+                )
+                .toHaveSize(snapshotAfterHydration[snapshotKey].childNodes.length);
+        }
+
+        expect(consoleSpy.calls.warn).toHaveSize(0);
+        expect(consoleSpy.calls.error).toHaveSize(0);
+    },
+};
@@ -0,0 +1,4 @@
+<template>
+    <p class="first">{zeroLengthText}‍{zeroLengthText}‍</p>
+    <p class="second">{zeroLengthText}{zeroLengthText}{zeroLengthText}{zeroLengthText}</p>
+</template>
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class Main extends LightningElement {
+    zeroLengthText = '';
+}