Fix snapshots from breaking inside tables

* Zoom
* Cheerio rewrite
* Improved settings
* SVG Demo

README.md

@@ -132,6 +132,8 @@ stringifyObjects     | `false`           | **EXPERIMENTAL** Replaces `title="[ob
    * `data-testid="whatever" `
    * `data-test-id="whatever"`
 1. All `data-v-whatever=""` will be removed. These are attributes added by Vue to help scope styles. Removing them from your snapshots makes updating scoped dependencies easier.
+1. Any empty HTML attributes will be trimmed to remove the empty assignment. So `<div class=""></div>` becomes `<div class></div>`.
+1. Some optionally self-closing tags, will now become self-closing. So `<svg><path></path></svg>` becomes `<svg><path /></svg>`.
 
 **Example:** These are the kind of diffs you can expect to see when migrating from v2 to v3.
 
@@ -166,14 +168,19 @@ stringifyObjects     | `false`           | **EXPERIMENTAL** Replaces `title="[ob
 -    </button></a>
 +      </button>
 +    </a>
+-    <svg style="">
++    <svg style>
+-      <path d="M 10,150 L 70,10 L 130,150 z"></path>
++      <path d="M 10,150 L 70,10 L 130,150 z" />
+     </svg>
    </div>
  </div>
 ```
 
 
 ### Avoiding breaking changes (not recommended)
 
-Though all default settings are designed to be the best choice for most people, if you want to opt out of these (or opt-in to other changes, like removing HTML comments from snapshots) you can via a settings object in your Vue config.
+Though all default settings are designed to be the best choice for most people, if you want to opt out of these (or opt-in to other changes, like removing HTML comments from snapshots) you can via a settings object in your Vue config. Note, some changes cannot currently be avoided (self-closing enforcement and empty attribute trimming).
 
 1. Edit your `vue.config.js` in the root of your project (or create it, if you do not have one).
 1. The following are the `jest-serializer-vue` v2.0.2 settings:

index.js

@@ -1,7 +1,7 @@
 const beautify = require('js-beautify').html;
 const fs = require('fs');
-const JSDOM = require('jsdom').JSDOM;
 
+const helpers = require('./src/helpers.js');
 const loadOptions = require('./src/loadOptions.js');
 const replaceObjectObject = require('./src/replaceObjectObject.js');
 const removeTestTokens = require('./src/removeTestTokens.js');
@@ -43,14 +43,11 @@ function isVueWrapper (received) {
  */
 function removeServerRenderedText (html, options) {
   if (!options || options.removeServerRendered) {
-    const dom = new JSDOM(html);
+    const $ = helpers.$(html);
 
-    let elements = dom.window.document.querySelectorAll('[data-server-rendered]');
-    elements.forEach(function (element) {
-      element.removeAttribute('data-server-rendered');
-    });
+    $('[data-server-rendered]').removeAttr('data-server-rendered');
 
-    return dom.window.document.body.innerHTML;
+    return $.html();
   }
   return html;
 }
@@ -65,26 +62,28 @@ function removeServerRenderedText (html, options) {
 function removeScopedStylesDataVIDAttributes (html, options) {
   if (!options || options.removeDataVId) {
     // [-\w]+ will catch 1 or more instaces of a-z, A-Z, 0-9, hyphen (-), or underscore (_)
-    const regex = / data-v-[-\w]+=""/g;
+    const regexA = / data-v-[-\w]+=""/g;
+    const regexB = / data-v-[-\w]+/g;
 
     // [[' data-v-asdf=""'], [' data-v-qwer=""'], [' data-v-asdf=""']]
-    let dataVIds = Array.from(html.matchAll(regex));
+    let dataVIdsA = Array.from(html.matchAll(regexA));
+    // [[' data-v-asdf'], [' data-v-qwer'], [' data-v-asdf']]
+    let dataVIdsB = Array.from(html.matchAll(regexB));
+    // [...dataVIdsA, ...dataVIdsB]
+    let dataVIds = [].concat(dataVIdsA, dataVIdsB);
     // ['data-v-asdf', 'data-v-qwer', 'data-v-asdf']
     dataVIds = dataVIds.map(function (match) {
       return match[0].trim().replace('=""', '');
     });
     // ['data-v-asdf', 'data-v-qwer']
     dataVIds = Array.from(new Set(dataVIds));
 
-    const dom = new JSDOM(html);
+    const $ = helpers.$(html);
     dataVIds.forEach(function (attribute) {
-      let elements = dom.window.document.querySelectorAll('[' + attribute + ']');
-      elements.forEach(function (element) {
-        element.removeAttribute(attribute);
-      });
+      $('[' + attribute + ']').removeAttr(attribute);
     });
 
-    html = dom.window.document.body.innerHTML;
+    html = $.html();
   }
   return html;
 }