fix: trim data-lwc-host-mutated attr values (#283)

packages/@lwc/jest-preset/src/ssr/html-serializer.js

@@ -104,8 +104,10 @@ function formatHTML(src) {
         res
             .trim()
             .replace(getKnownScopeTokensRegex(), '__lwc_scope_token__')
-            // These special attributes are reserved by the framework and are meaningless to component authors
-            .replace(/ data-lwc-host-mutated/g, '')
+            // These special attributes are reserved by the framework and are meaningless to component authors.
+            // `data-lwc-host-mutated` may or may not have an attribute value depending on the version of LWC.
+            // See: https://github.com/salesforce/lwc/pull/4385
+            .replace(/ data-lwc-host-mutated(="[^"]*")?/g, '')
             .replace(/ data-rendered-by-lwc/g, '')
     );
 }

test/src/modules/serializer/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.spec.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`serializes a component containing framework-supplied attributes 1`] = `
+<serializer-component>
+  <h1>
+    Hello world
+  </h1>
+</serializer-component>
+`;

test/src/modules/serializer/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.spec.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { createElement } from 'lwc';
+import FrameworkAttrsWithValue from '../frameworkAttrsWithValue';
+
+it('serializes a component containing framework-supplied attributes', () => {
+    const elm = createElement('serializer-component', { is: FrameworkAttrsWithValue });
+    document.body.appendChild(elm);
+
+    expect(elm).toMatchSnapshot();
+});

test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.css

@@ -0,0 +1,3 @@
+h1 {
+    color: blue;
+}

test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+  <h1>Hello world</h1>
+</template>

test/src/modules/serializer/frameworkAttrsWithValue/frameworkAttrsWithValue.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+import { LightningElement } from 'lwc';
+
+export default class FrameworkAttrsWithValue extends LightningElement {
+    static renderMode = 'light';
+
+    connectedCallback() {
+        // Typically this is only added by the framework itself, but here we are explicitly adding it
+        // to make the test simpler
+        this.setAttribute('data-lwc-host-mutated', 'class data-foo');
+    }
+}

test/src/modules/ssr/frameworkAttrsWithValue/__tests__/__snapshots__/frameworkAttrsWithValue.ssr-test.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`serializes component with framework-supplied attributes with value 1`] = `
+<x-basic>
+  <style type="text/css">
+    h1 {color: blue;}
+  </style>
+  <h1>
+    Hello world
+  </h1>
+</x-basic>
+`;

test/src/modules/ssr/frameworkAttrsWithValue/__tests__/frameworkAttrsWithValue.ssr-test.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { renderComponent } from 'lwc';
+import FrameworkAttrsWithValue from '../frameworkAttrsWithValue';
+
+it('serializes component with framework-supplied attributes with value', () => {
+    const renderedComponent = renderComponent('x-basic', FrameworkAttrsWithValue, {});
+
+    expect(renderedComponent).toMatchSnapshot();
+});

test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.css

@@ -0,0 +1,3 @@
+h1 {
+    color: blue;
+}

test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.html

@@ -0,0 +1,3 @@
+<template lwc:render-mode="light">
+  <h1>Hello world</h1>
+</template>

test/src/modules/ssr/frameworkAttrsWithValue/frameworkAttrsWithValue.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+import { LightningElement } from 'lwc';
+
+export default class FrameworkAttrsWithValue extends LightningElement {
+    static renderMode = 'light';
+
+    connectedCallback() {
+        // Typically this is only added by the framework itself, but here we are explicitly adding it
+        // to make the test simpler
+        this.setAttribute('data-lwc-host-mutated', 'class data-foo');
+    }
+}