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

* test(wtr): update tests to use relative path to utils

instead of weird fake module

* test(wtr): revert removing TestUtils

* test(wtr): remove useless describe

There's no setup/teardown needed, it's a single test, and WTR provides per-file encapsulation

* test(wtr): replace IIFE script with module import

* test(wtr): clean up SSR execution script

working toward just importing and executing things, but not quite there yet

* test(wtr): always use DISABLE_SYNTHETIC

two env vars for the same goal is unnecessary

* test(wtr): enable all hydration tests

I think the last one was a concurrency related timeout,
which was previously addressed.

* test(wtr): remove side effect from signals helper

helper files shouldn't have side effects; all setup should be in the setup file

* test(wtr): import directly from file, not from barrel exporter

* test(wtr): change bulk export statement to individual exports

* test(wtr): remove unnecessary aria re-export

* test(wtr): fix a few more ARIA util imports

* chore: move comment for nicer aesthetic

* test(wtr): remove unused option

* test(wtr): fix another ARIA util import

* test(wtr): import directly from hooks file rather than utils

* test(wtr): import directly from signals file rather than utils

* test(wtr): import directly from console helper rather than utils

* test(wtr): import directly from constants helper rather than utils

* test(wtr): only import what is needed from LWC

* test(wtr): split lwc:dynamic load helpers into separate file

* test(wtr): avoid relying on global LWC

* test(wtr): remove unnecessary wrapping of hydration test config

* test(wtr): remove test-utils logic from resolveImport

no longer necessary

* test(wtr): move plugin from shared config to only config that uses it

* test(wtr): remove useless guid

all tests are run in isolation

* test(wtr): remove unnecessary test-utils global

* test(wtr): clean up component definition

* test(wtr): change component in test from IIFE to import

* test(wtr): shift logic out of wrapper into static test runner file

we want to keep the generated wrappers as thin as possible

and use regular js files as much as possible

* test(wtr): make test setup/teardown more idiomatic

* test(wtr): clean up module compilation

* chore(wtr): make dependency on @vitest/spy explicit

* test(wtr): remove console suppression

It was originally implemented to suppress distracting warnings in Karma tests,
but WTR's log output is different / managed differently.

* test(wtr): clean up names and comments

* test(wtr): move and rename file

* test(wtr): remove usage of global TestUtils from hydration tests

* test(wtr): remove LWC import from utils

It breaks hydration tests if there's an import from LWC.

* test(wtr): remove unused external deps

Author: wjhsf

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) {