comments

.npmignore

@@ -0,0 +1,7 @@
+/.git
+/.github
+/tests
+.editorconfig
+.gitignore
+eslint.config.js
+vitest.config.js

src/formatMarkup.js

@@ -54,6 +54,29 @@ export const diffableFormatter = function (markup) {
       }
       return '';
     }
+    if (node.nodeName === '#comment') {
+      let data = node.data
+        .split('\n')
+        .map((line, index, lines) => {
+          if (!line) {
+            return line;
+          }
+          if (index + 1 === lines.length) {
+            return line.trim();
+          }
+          return '  '.repeat(indent + 1) + line.trimStart();
+        })
+        .join('\n');
+      if (!data.startsWith('\n')) {
+        data = ' ' + data;
+      }
+      if (!data.endsWith('\n')) {
+        data = data + ' ';
+      } else {
+        data = data + '  '.repeat(indent);
+      }
+      return '\n' + '  '.repeat(indent) + '<!--' + data + '-->';
+    }
 
     let result = '\n' + '  '.repeat(indent) + '<' + node.nodeName;
 

tests/unit/src/formatMarkup.test.js

@@ -1,3 +1,5 @@
+import { mount } from '@vue/test-utils';
+
 import { formatMarkup } from '@/formatMarkup.js';
 
 const unformattedMarkup = `
@@ -83,4 +85,45 @@ describe('Format markup', () => {
     expect(console.info)
       .toHaveBeenCalledWith('Vue 3 Snapshot Serializer: Your custom markup formatter must return a string.');
   });
+
+  describe('Comments', () => {
+    test('Does not change comments', () => {
+      const MyComponent = {
+        template: `
+          <div>
+            <!-- Single Line -->
+            <p>1</p>
+            <!--
+              Multi
+              Line
+            -->
+            <p>2</p>
+            <p v-if="false">3</p>
+          </div>
+        `
+      };
+      const wrapper = mount(MyComponent);
+
+      globalThis.vueSnapshots.formatter = 'diffable';
+      globalThis.vueSnapshots.removeComments = false;
+
+      expect(wrapper.html())
+        .toMatchInlineSnapshot(`
+          <div>
+            <!-- Single Line -->
+            <p>
+              1
+            </p>
+            <!--
+              Multi
+              Line
+            -->
+            <p>
+              2
+            </p>
+            <!-- v-if -->
+          </div>
+        `);
+    });
+  });
 });