test(wtr): remove usage of global TestUtils from hydration tests @W-19098266

eslint.config.mjs

@@ -361,7 +361,6 @@ export default tseslint.config(
             globals: {
                 lwcRuntimeFlags: true,
                 process: true,
-                TestUtils: true,
                 ...globals.browser,
                 ...globals.jasmine,
             },

packages/@lwc/integration-not-karma/configs/plugins/serve-hydration.js

@@ -50,7 +50,7 @@ async function compileModule(input, targetSSR, format) {
             }),
         ],
 
-        external: ['lwc', '@lwc/ssr-runtime', 'test-utils', '@test/loader'], // @todo: add ssr modules for test-utils and @test/loader
+        external: ['lwc', '@lwc/ssr-runtime'],
 
         onwarn(warning, warn) {
             // Ignore warnings from our own Rollup plugin

packages/@lwc/integration-not-karma/configs/plugins/serve-integration.js

@@ -84,12 +84,9 @@ const transform = async (ctx) => {
         cache,
         plugins: [customLwcRollupPlugin],
 
-        // Rollup should not attempt to resolve the engine and the test utils, Karma takes care of injecting it
-        // globally in the page before running the tests.
         external: [
             'lwc',
             'wire-service',
-            '@test/loader',
             // Some helper files export functions that mutate a global state. The setup file calls
             // some of those functions and does not get bundled. Including the helper files in the
             // bundle would create a separate global state, causing tests to fail. We don't need to

packages/@lwc/integration-not-karma/helpers/reporting-control.js

@@ -0,0 +1,18 @@
+import { __unstable__ReportingControl } from 'lwc';
+
+/**
+ *
+ * @param dispatcher
+ * @param runtimeEvents List of runtime events to filter by. If no list is provided, all events will be dispatched.
+ */
+export function attachReportingControlDispatcher(dispatcher, runtimeEvents) {
+    __unstable__ReportingControl.attachDispatcher((eventName, payload) => {
+        if (!runtimeEvents || runtimeEvents.includes(eventName)) {
+            dispatcher(eventName, payload);
+        }
+    });
+}
+
+export function detachReportingControlDispatcher() {
+    __unstable__ReportingControl.detachDispatcher();
+}

packages/@lwc/integration-not-karma/helpers/setup.js

@@ -3,15 +3,10 @@ import { JestAsymmetricMatchers, JestChaiExpect, JestExtend } from '@vitest/expe
 import * as chai from 'chai';
 import { spyOn, fn } from '@vitest/spy';
 import { registerCustomMatchers } from './matchers/index.js';
-import * as TestUtils from './utils.js';
 import { initSignals } from './signals.js';
 
 initSignals();
 
-// FIXME: As a relic of the Karma tests, some test files rely on the global object,
-// rather than importing from `test-utils`.
-window.TestUtils = TestUtils;
-
 // allows using expect.extend instead of chai.use to extend plugins
 chai.use(JestExtend);
 // adds all jest matchers to expect

packages/@lwc/integration-not-karma/helpers/utils.js

@@ -1,7 +1,6 @@
 /*
  * An as yet uncategorized mishmash of helpers, relics of Karma
  */
-import { __unstable__ReportingControl } from 'lwc';
 
 // Listen for errors thrown directly by the callback
 function directErrorListener(callback) {
@@ -47,23 +46,6 @@ export function customElementCallbackReactionErrorListener(callback) {
         : windowErrorListener(callback);
 }
 
-/**
- *
- * @param dispatcher
- * @param runtimeEvents List of runtime events to filter by. If no list is provided, all events will be dispatched.
- */
-export function attachReportingControlDispatcher(dispatcher, runtimeEvents) {
-    __unstable__ReportingControl.attachDispatcher((eventName, payload) => {
-        if (!runtimeEvents || runtimeEvents.includes(eventName)) {
-            dispatcher(eventName, payload);
-        }
-    });
-}
-
-export function detachReportingControlDispatcher() {
-    __unstable__ReportingControl.detachDispatcher();
-}
-
 export function extractDataIds(root) {
     const nodes = {};
 

packages/@lwc/integration-not-karma/test-hydration/attributes/falsy-mismatch/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../helpers/utils.js';
+
 export default {
     props: {
         isFalse: false,
@@ -28,7 +30,7 @@ export default {
             expect(divs[i].getAttribute('data-foo')).toEqual(expectedAttrValues[i]);
         }
 
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
+        expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
                 'Hydration attribute mismatch on: <div> - rendered on server: data-foo=null - expected on client: data-foo="undefined"',

packages/@lwc/integration-not-karma/test-hydration/context/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCalls } from '../../helpers/utils.js';
+
 export default {
     // server is expected to generate the same console error as the client
     expectedSSRConsoleCalls: {
@@ -40,7 +42,7 @@ export default {
         // Expect an error as one context was generated twice.
         // Expect an error as one context was malformed (did not define connectContext or disconnectContext methods).
         // Expect server/client context output parity (no hydration warnings)
-        TestUtils.expectConsoleCalls(consoleCalls, {
+        expectConsoleCalls(consoleCalls, {
             error: [],
             warn: [
                 'Attempted to connect to trusted context but received the following error',

packages/@lwc/integration-not-karma/test-hydration/errors/already-hydrated/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCalls } from '../../../helpers/utils.js';
+
 export default {
     advancedTest(target, { Component, hydrateComponent, consoleSpy }) {
         hydrateComponent(target, Component, {});
@@ -6,7 +8,7 @@ export default {
 
         const consoleCalls = consoleSpy.calls;
 
-        TestUtils.expectConsoleCalls(consoleCalls, {
+        expectConsoleCalls(consoleCalls, {
             warn: ['"hydrateComponent" expects an element that is not hydrated.'],
         });
     },

packages/@lwc/integration-not-karma/test-hydration/inner-outer-html/index.spec.js

@@ -1,7 +1,9 @@
+import { extractDataIds } from '../../helpers/utils.js';
+
 export default {
     props: {},
     advancedTest(target, { consoleSpy }) {
-        const ids = Object.entries(TestUtils.extractDataIds(target)).filter(
+        const ids = Object.entries(extractDataIds(target)).filter(
             ([id]) => !id.endsWith('.shadowRoot')
         );
         for (const [id, node] of ids) {

packages/@lwc/integration-not-karma/test-hydration/light-dom/scoped-styles/deduped-scoped-styles/index.spec.js

@@ -1,7 +1,9 @@
+import { expectConsoleCalls } from '../../../../helpers/utils.js';
+
 export default {
     test(target, snapshot, consoleCalls) {
         // W-19087941: Expect no errors or warnings, hydration or otherwise
-        TestUtils.expectConsoleCalls(consoleCalls, {
+        expectConsoleCalls(consoleCalls, {
             error: [],
             warn: [],
         });

packages/@lwc/integration-not-karma/test-hydration/mismatches/attrs-compatibility/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../helpers/utils.js';
+
 export default {
     props: {
         ssr: true,
@@ -18,7 +20,7 @@ export default {
         expect(p.getAttribute('data-same')).toBe('same-value');
         expect(p.getAttribute('data-another-diff')).toBe('client-val');
 
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
+        expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
                 'Hydration attribute mismatch on: <p> - rendered on server: title="ssr-title" - expected on client: title="client-title"',

packages/@lwc/integration-not-karma/test-hydration/mismatches/attrs-expression/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../helpers/utils.js';
+
 export default {
     props: {
         foo: 'server',
@@ -17,7 +19,7 @@ export default {
         expect(div.getAttribute('data-foo')).toBe('client');
         expect(div.getAttribute('data-static')).toBe('same-value');
 
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
+        expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
                 'Hydration attribute mismatch on: <div> - rendered on server: data-foo="server" - expected on client: data-foo="client"',

packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-different/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../../helpers/utils.js';
+
 export default {
     props: {
         classes: 'c1 c2 c3',
@@ -18,7 +20,7 @@ export default {
         expect(p).not.toBe(snapshots.p);
         expect(p.className).not.toBe(snapshots.classes);
 
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
+        expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
                 'Hydration attribute mismatch on: <p> - rendered on server: class="c1 c2 c3" - expected on client: class="c2 c3 c4"',

packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-empty-in-ssr-null-string-in-client/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../../helpers/utils.js';
+
 // SSR has no class at all, whereas the client has `class="null"`.
 // This is to test if hydration is smart enough to recognize the difference between a null
 // attribute and the literal string "null".
@@ -21,7 +23,7 @@ export default {
         expect(p).not.toBe(snapshots.p);
         expect(p.className).not.toBe(snapshots.className);
 
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
+        expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
                 'Hydration attribute mismatch on: <p> - rendered on server: class="" - expected on client: class="null"',

packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-null-string-in-ssr-empty-in-client/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../../helpers/utils.js';
+
 // SSR has `class="null"`, whereas the client has no class at all.
 // This is to test if hydration is smart enough to recognize the difference between a null
 // attribute and the literal string "null".
@@ -21,7 +23,7 @@ export default {
         expect(p).not.toBe(snapshots.p);
         expect(p.className).not.toBe(snapshots.className);
 
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
+        expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
                 'Hydration attribute mismatch on: <p> - rendered on server: class="null" - expected on client: class=""',

packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/dynamic-same-different-order-does-not-throw/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../../helpers/utils.js';
+
 export default {
     props: {
         classes: 'c1 c2 c3',
@@ -18,7 +20,7 @@ export default {
         expect(p).toBe(snapshots.p);
         expect(p.className).toBe(snapshots.classes);
 
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
+        expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [],
         });

packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/empty-string-on-client-nonempty-on-server/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../../helpers/utils.js';
+
 export default {
     props: {
         classes: 'yolo',
@@ -17,7 +19,7 @@ export default {
         expect(p).not.toBe(snapshots.p);
         expect(p.className).toBe('');
 
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
+        expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
                 'Hydration attribute mismatch on: <p> - rendered on server: class="yolo" - expected on client: class=""',

packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/empty-string-on-server-nonempty-on-client/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../../helpers/utils.js';
+
 export default {
     props: {
         classes: '',
@@ -17,7 +19,7 @@ export default {
         expect(p).not.toBe(snapshots.p);
         expect(p.className).toBe('yolo');
 
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
+        expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
                 'Hydration attribute mismatch on: <p> - rendered on server: class="" - expected on client: class="yolo"',

packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/empty-string/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../../helpers/utils.js';
+
 export default {
     props: {
         classes: '',
@@ -14,7 +16,7 @@ export default {
         expect(p).toBe(snapshots.p);
         expect(p.className).toBe(snapshots.classes);
 
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
+        expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [],
         });

packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/extra-class-from-client/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../../helpers/utils.js';
+
 export default {
     props: {
         ssr: true,
@@ -19,7 +21,7 @@ export default {
         expect(p.className).not.toBe(snapshots.classes);
         expect(p.className).toBe('c1 c2 c3');
 
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
+        expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
                 'Hydration attribute mismatch on: <p> - rendered on server: class="c1 c3" - expected on client: class="c1 c2 c3"',

packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/extra-class-from-server/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../../helpers/utils.js';
+
 export default {
     props: {
         ssr: true,
@@ -19,7 +21,7 @@ export default {
         expect(p.className).not.toBe(snapshots.classes);
         expect(p.className).toBe('c1 c3');
 
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
+        expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
                 'Hydration attribute mismatch on: <p> - rendered on server: class="c1 c2 c3" - expected on client: class="c1 c3"',

packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/only-present-in-ssr/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../../helpers/utils.js';
+
 export default {
     advancedTest(target, { Component, hydrateComponent, consoleSpy }) {
         // This simulates a condition where the server-rendered markup has
@@ -11,7 +13,7 @@ export default {
         hydrateComponent(target, Component, {});
 
         const consoleCalls = consoleSpy.calls;
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
+        expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
                 'Hydration attribute mismatch on: <x-child> - rendered on server: class="foo" - expected on client: class=""',

packages/@lwc/integration-not-karma/test-hydration/mismatches/class-attr/same-different-order/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../../helpers/utils.js';
+
 export default {
     props: {
         ssr: true,
@@ -25,7 +27,7 @@ export default {
             expect(p).not.toBe(snapshots.p);
             expect(p.className).toBe('c1 c2 c3');
 
-            TestUtils.expectConsoleCallsDev(consoleCalls, {
+            expectConsoleCallsDev(consoleCalls, {
                 error: [],
                 warn: [
                     'Hydration attribute mismatch on: <p> - rendered on server: class="c3 c2 c1" - expected on client: class="c1 c2 c3"',

packages/@lwc/integration-not-karma/test-hydration/mismatches/comment-instead-of-text/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../helpers/utils.js';
+
 export default {
     props: {
         showAsText: true,
@@ -17,7 +19,7 @@ export default {
         expect(comment.nodeType).toBe(Node.COMMENT_NODE);
         expect(comment.nodeValue).toBe(snapshots.text.nodeValue);
 
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
+        expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
                 'Hydration node mismatch on: #comment - rendered on server: #text - expected on client: #comment',

packages/@lwc/integration-not-karma/test-hydration/mismatches/different-lwc-inner-html/index.spec.js

@@ -1,3 +1,5 @@
+import { expectConsoleCallsDev } from '../../../helpers/utils.js';
+
 export default {
     props: {
         content: '<p>test-content</p>',
@@ -21,7 +23,7 @@ export default {
         expect(p).not.toBe(snapshot.p);
         expect(p.textContent).toBe('different-content');
 
-        TestUtils.expectConsoleCallsDev(consoleCalls, {
+        expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
                 'Hydration innerHTML mismatch on: <div> - rendered on server: <p>test-content</p> - expected on client: <p>different-content</p>',