fix: reduce nodes to nodeName for browser parity

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

@@ -577,7 +577,7 @@ window.TestUtils = (function (lwc, jasmine, beforeAll) {
                     for (let i = 0; i < matchers.length; i++) {
                         const matcher = matchers[i];
                         const args = calls[i];
-                        const argsString = args.map((arg) => stringifyArg(arg)).join('');
+                        const argsString = args.map((arg) => stringifyArg(arg)).join(' ');
                         expect(argsString).toMatch(matcher);
                     }
                 }
@@ -588,14 +588,12 @@ window.TestUtils = (function (lwc, jasmine, beforeAll) {
     function stringifyArg(arg) {
         if (arg instanceof Array) {
             return arg.map((v) => stringifyArg(v));
-        } else if (arg instanceof Comment) {
-            return `<!--${arg.data}-->`;
-        } else if (arg instanceof Text) {
-            return arg.data;
-        } else if (arg instanceof Element) {
-            return arg.outerHTML;
-        } else if (arg instanceof ShadowRoot) {
-            return arg.innerHTML;
+        } else if (arg?.nodeName) {
+            // Browsers render nodes differently (class order, etc). Node.nodeName is universal and sufficient for testing.
+            return arg.nodeName;
+        } else if (typeof arg === 'string') {
+            // Avoids adding newlines in the matchers
+            return arg.replaceAll('\n', '');
         } else {
             return arg;
         }

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

@@ -31,12 +31,8 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `LWC warn:Hydration attribute mismatch on:<div data-foo="undefined"></div>
-- rendered on server:data-foo=null
-- expected on client:data-foo="undefined"`,
-                `LWC warn:Hydration attribute mismatch on:<div data-foo="null"></div>
-- rendered on server:data-foo=null
-- expected on client:data-foo="null"`,
+                'Hydration attribute mismatch on: DIV - rendered on server: data-foo=null - expected on client: data-foo="undefined"',
+                'Hydration attribute mismatch on: DIV - rendered on server: data-foo=null - expected on client: data-foo="null"',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -21,12 +21,8 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p title="client-title" data-same="same-value" data-another-diff="client-val">text</p>
-- rendered on server:title="ssr-title"
-- expected on client:title="client-title"`,
-                `Hydration attribute mismatch on:<p title="client-title" data-same="same-value" data-another-diff="client-val">text</p>
-- rendered on server:data-another-diff="ssr-val"
-- expected on client:data-another-diff="client-val"`,
+                'Hydration attribute mismatch on: P - rendered on server: title="ssr-title" - expected on client: title="client-title"',
+                'Hydration attribute mismatch on: P - rendered on server: data-another-diff="ssr-val" - expected on client: data-another-diff="client-val"',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -20,9 +20,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<div data-static="same-value" data-foo="client"></div>
-- rendered on server:data-foo="server"
-- expected on client:data-foo="client"`,
+                'Hydration attribute mismatch on: DIV - rendered on server: data-foo="server" - expected on client: data-foo="client"',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -21,9 +21,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p class="c2 c3 c4">text</p>
-- rendered on server:class="c1 c2 c3"
-- expected on client:class="c2 c3 c4"`,
+                'Hydration attribute mismatch on: P - rendered on server: class="c1 c2 c3" - expected on client: class="c2 c3 c4"',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -24,9 +24,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p class="null">text</p>
-- rendered on server:class=""
-- expected on client:class="null"`,
+                'Hydration attribute mismatch on: P - rendered on server: class="" - expected on client: class="null"',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -24,9 +24,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p>text</p>
-- rendered on server:class="null"
-- expected on client:class=""`,
+                'Hydration attribute mismatch on: P - rendered on server: class="null" - expected on client: class=""',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -20,9 +20,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p>text</p>
-- rendered on server:class="yolo"
-- expected on client:class=""`,
+                'Hydration attribute mismatch on: P - rendered on server: class="yolo" - expected on client: class=""',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -20,9 +20,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p class="yolo">text</p>
-- rendered on server:class=""
-- expected on client:class="yolo"`,
+                'Hydration attribute mismatch on: P - rendered on server: class="" - expected on client: class="yolo"',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -22,9 +22,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p class="c1 c2 c3">txt</p>
-- rendered on server:class="c1 c3"
-- expected on client:class="c1 c2 c3"`,
+                'Hydration attribute mismatch on: P - rendered on server: class="c1 c3" - expected on client: class="c1 c2 c3"',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -22,9 +22,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p class="c1 c3">txt</p>
-- rendered on server:class="c1 c2 c3"
-- expected on client:class="c1 c3"`,
+                'Hydration attribute mismatch on: P - rendered on server: class="c1 c2 c3" - expected on client: class="c1 c3"',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -14,9 +14,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<x-child></x-child>
-- rendered on server:class="foo"
-- expected on client:class=""`,
+                'Hydration attribute mismatch on: X-CHILD - rendered on server: class="foo" - expected on client: class=""',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -28,9 +28,7 @@ export default {
             TestUtils.expectConsoleCallsDev(consoleCalls, {
                 error: [],
                 warn: [
-                    `Hydration attribute mismatch on:<p class="c1 c2 c3">txt</p>
-- rendered on server:class="c3 c2 c1"
-- expected on client:class="c1 c2 c3"`,
+                    'Hydration attribute mismatch on: P - rendered on server: class="c3 c2 c1" - expected on client: class="c1 c2 c3"',
                     'Hydration completed with errors.',
                 ],
             });

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

@@ -20,9 +20,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration node mismatch on:<!--text-->
-- rendered on server:text
-- expected on client:<!--text-->`,
+                'Hydration node mismatch on: #comment - rendered on server: #text - expected on client: #comment',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -24,9 +24,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration innerHTML mismatch on:<div><p>different-content</p></div>
-- rendered on server:<p>test-content</p>
-- expected on client:<p>different-content</p>`,
+                'Hydration innerHTML mismatch on: DIV - rendered on server: <p>test-content</p> - expected on client: <p>different-content</p>',
             ],
         });
 

packages/@lwc/integration-karma/test-hydration/mismatches/display-errors-attrs-class-style/index.spec.js

@@ -26,15 +26,9 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p data-attrs="client-attrs" class="client-class" style="background-color: blue;">text</p>
-- rendered on server:data-attrs="ssr-attrs"
-- expected on client:data-attrs="client-attrs"`,
-                `Hydration attribute mismatch on:<p data-attrs="client-attrs" class="client-class" style="background-color: blue;">text</p>
-- rendered on server:class="ssr-class"
-- expected on client:class="client-class"`,
-                `Hydration attribute mismatch on:<p data-attrs="client-attrs" class="client-class" style="background-color: blue;">text</p>
-- rendered on server:style="background-color: red;"
-- expected on client:style="background-color: blue;"`,
+                'Hydration attribute mismatch on: P - rendered on server: data-attrs="ssr-attrs" - expected on client: data-attrs="client-attrs"',
+                'Hydration attribute mismatch on: P - rendered on server: class="ssr-class" - expected on client: class="client-class"',
+                'Hydration attribute mismatch on: P - rendered on server: style="background-color: red;" - expected on client: style="background-color: blue;"',
                 'Hydration completed with errors.',
             ],
         });

packages/@lwc/integration-karma/test-hydration/mismatches/dynamic-component/index.spec.js

@@ -20,9 +20,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration node mismatch on:<x-client></x-client>
-- rendered on server:<x-server></x-server>
-- expected on client:<x-client></x-client>`,
+                'Hydration node mismatch on: X-CLIENT - rendered on server: X-SERVER - expected on client: X-CLIENT',
                 'Hydration completed with errors.',
             ],
         });

packages/@lwc/integration-karma/test-hydration/mismatches/element-instead-of-textNode/index.spec.js

@@ -22,9 +22,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration node mismatch on:text
-- rendered on server:<span>text</span>
-- expected on client:text`,
+                'Hydration node mismatch on: #text - rendered on server: SPAN - expected on client: #text',
                 'Hydration completed with errors.',
             ],
         });

packages/@lwc/integration-karma/test-hydration/mismatches/favors-client-side-comment/index.spec.js

@@ -21,9 +21,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration comment mismatch on:<!--second-->
-- rendered on server:first
-- expected on client:second`,
+                'Hydration comment mismatch on: #comment - rendered on server: first - expected on client: second',
             ],
         });
     },

packages/@lwc/integration-karma/test-hydration/mismatches/favors-client-side-text/index.spec.js

@@ -21,9 +21,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration text content mismatch on:<p>bye!</p>
-- rendered on server:hello!
-- expected on client:bye!`,
+                'Hydration text content mismatch on: P - rendered on server: hello! - expected on client: bye!',
             ],
         });
     },

packages/@lwc/integration-karma/test-hydration/mismatches/host-mutation-in-connected-callback/attr-mutated-class-mismatch/index.spec.js

@@ -27,9 +27,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<x-child class="is-client" data-foo="bar" data-mutatis="mutandis"></x-child>
-- rendered on server:class="is-server"
-- expected on client:class="is-client"`,
+                'Hydration attribute mismatch on: X-CHILD - rendered on server: class="is-server" - expected on client: class="is-client"',
                 'Hydration completed with errors.',
             ],
         });

packages/@lwc/integration-karma/test-hydration/mismatches/host-mutation-in-connected-callback/class-mutated-attr-mismatch/index.spec.js

@@ -26,9 +26,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<x-child class="static mutatis" data-mismatched-attr="is-client"></x-child>
-- rendered on server:data-mismatched-attr="is-server"
-- expected on client:data-mismatched-attr="is-client"`,
+                'Hydration attribute mismatch on: X-CHILD - rendered on server: data-mismatched-attr="is-server" - expected on client: data-mismatched-attr="is-client"',
                 'Hydration completed with errors.',
             ],
         });

packages/@lwc/integration-karma/test-hydration/mismatches/invalid-number-of-nodes/foreach/index.spec.js

@@ -18,9 +18,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration child node mismatch on:<ul><li>red</li><li>blue</li></ul>
-- rendered on server:<li>red</li>,<li>blue</li>,<li>green</li>
-- expected on client:<li>red</li>,<li>blue</li>`,
+                'Hydration child node mismatch on: UL - rendered on server: LI,LI,LI - expected on client: LI,LI',
                 'Hydration completed with errors.',
             ],
         });

packages/@lwc/integration-karma/test-hydration/mismatches/invalid-number-of-nodes/if-true/index.spec.js

@@ -18,9 +18,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration child node mismatch on:<ul><li>red</li><li>blue</li></ul>
-- rendered on server:<li>red</li>,<li>blue</li>,<li>green</li>
-- expected on client:<li>red</li>,,<li>blue</li>`,
+                'Hydration child node mismatch on: UL - rendered on server: LI,LI,LI - expected on client: LI,,LI',
                 'Hydration completed with errors.',
             ],
         });

packages/@lwc/integration-karma/test-hydration/mismatches/sibling-issue/index.spec.js

@@ -19,9 +19,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration child node mismatch on:<!----><div></div><!---->
-- rendered on server:
-- expected on client:<!---->`,
+                'Hydration child node mismatch on: #document-fragment - rendered on server:  - expected on client: #comment',
                 'Hydration completed with errors.',
             ],
         });

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/computed/different-priority/index.spec.js

@@ -24,9 +24,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p style="background-color: red; border-color: red !important;">txt</p>
-- rendered on server:style="background-color: red; border-color: red;"
-- expected on client:style="background-color: red; border-color: red !important;"`,
+                'Hydration attribute mismatch on: P - rendered on server: style="background-color: red; border-color: red;" - expected on client: style="background-color: red; border-color: red !important;"',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -24,9 +24,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p style="background-color: red; border-color: red; margin: 1px;">txt</p>
-- rendered on server:style="background-color: red; border-color: red;"
-- expected on client:style="background-color: red; border-color: red; margin: 1px;"`,
+                'Hydration attribute mismatch on: P - rendered on server: style="background-color: red; border-color: red;" - expected on client: style="background-color: red; border-color: red; margin: 1px;"',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -22,9 +22,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p style="background-color: red; border-color: red;">txt</p>
-- rendered on server:style="background-color: red; border-color: red; margin: 1px;"
-- expected on client:style="background-color: red; border-color: red;"`,
+                'Hydration attribute mismatch on: P - rendered on server: style="background-color: red; border-color: red; margin: 1px;" - expected on client: style="background-color: red; border-color: red;"',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -23,9 +23,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p style="margin: 1px; border-color: red; background-color: red;">txt</p>
-- rendered on server:style="background-color: red; border-color: red; margin: 1px;"
-- expected on client:style="margin: 1px; border-color: red; background-color: red;"`,
+                'Hydration attribute mismatch on: P - rendered on server: style="background-color: red; border-color: red; margin: 1px;" - expected on client: style="margin: 1px; border-color: red; background-color: red;"',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -20,9 +20,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p>text</p>
-- rendered on server:style="color: burlywood;"
-- expected on client:style=""`,
+                'Hydration attribute mismatch on: P - rendered on server: style="color: burlywood;" - expected on client: style=""',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -20,9 +20,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p style="color: burlywood;">text</p>
-- rendered on server:style=""
-- expected on client:style="color: burlywood;"`,
+                'Hydration attribute mismatch on: P - rendered on server: style="" - expected on client: style="color: burlywood;"',
                 'Hydration completed with errors.',
             ],
         });

packages/@lwc/integration-karma/test-hydration/mismatches/style-attr/static/different-priority/index.spec.js

@@ -24,9 +24,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p style="background-color: red; border-color: red !important;">txt</p>
-- rendered on server:style="background-color: red; border-color: red;"
-- expected on client:style="background-color: red; border-color: red !important;"`,
+                'Hydration attribute mismatch on: P - rendered on server: style="background-color: red; border-color: red;" - expected on client: style="background-color: red; border-color: red !important;"',
                 'Hydration completed with errors.',
             ],
         });

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

@@ -24,9 +24,7 @@ export default {
         TestUtils.expectConsoleCallsDev(consoleCalls, {
             error: [],
             warn: [
-                `Hydration attribute mismatch on:<p style="background-color: red; border-color: red; margin: 1px;">txt</p>
-- rendered on server:style="background-color: red; border-color: red;"
-- expected on client:style="background-color: red; border-color: red; margin: 1px;"`,
+                'Hydration attribute mismatch on: P - rendered on server: style="background-color: red; border-color: red;" - expected on client: style="background-color: red; border-color: red; margin: 1px;"',
                 'Hydration completed with errors.',
             ],
         });