v2.13.0 - AttributesNotToStringify Defaults

Features:

• global.vueSnapshots.debug = true will now log markup strings during cheerio transforms.
• I also made a change to how the types.js file is structured. ChatGPT said it would work with tsc and tsengine. But it lies pretty often, and dealing with TS being dumb is above my paygrade. Lemme know if it broke something, it's an easy fix if it did, but hopefully not.
• global.vueSnapshots.attributesNotToStringify was changed from having a default of ['style'] to ['class', 'style']. You may see snapshot changes similar to this:

-  class="{ active: true, disabled: false }"
+  class="active"

• This change was made due to a complex interaction between parent and child VNodes regarding class. Rather than make the already complicated code around this far more complex for this edge case, I just changed the defaults of the setting to avoid the issue.
  • I don't really see any benefit in having the object structure for classes shown in the snapshots, but if you do, feel free to make a PR fixing the underlying issues shown in #136.
  • If you are not impacted by this edge case and want to avoid these snapshot changes use this setting: global.vueSnapshots.attributesNotToStringify = ['style']

Maintenance:

• Updated Node/npm to latest versions.

Diff:

• v2.12.0...v2.13.0

v2.12.0 - Rename Scoped V-Bind Styles

Features:

• If you enable inlined styles of your scoped CSS when using v-bind, you can now replace the randomized ID with the word "scoped".

- <div style="--279c5a3b-color: #FF0000;">
+ <div style="--scoped-color: #FF0000;">
    <span class="example">
      Text
    </span>
  </div>

To learn more about this advanced feature, read this section of the Docs site:

• https://thejaredwilcurt.com/vue-snapshot-serializer/#scoped-v-bind

Diff:

• v2.11.0...v2.12.0

v2.11.0 - regexToRemoveAttributes

Features:

• Added the regexToRemoveAttributes feature, so you can dynamically remove attributes that match a given regex pattern.
  • Thanks to @ErgoSoftUK for the request.

<!--
global.vueSnapshots.regexToRemoveAttributes = undefined;
-->
<div data-container data-id-4285>
  <button class="primary" data-id-8320>
    Text
  </button>
</div>

<!--
global.vueSnapshots.regexToRemoveAttributes = new RegExp(/data-id.*/);
-->
<div data-container>
  <button class="primary">
    Text
  </button>
</div>

Diff:

• v2.10.0...v2.11.0

v2.10.0 - inlineStylesPerLine

Features:

• Added a new Diffable formatting setting to break up long lines of inline styles on to multiple lines, since component logic can live in these spaces.

Expect snapshot changes similar to this:

-      style="top: 0px; height: 0px; color: #F00; line-height: 2"
+      style="
+        top: 0px;
+        height: 0px;
+        color: #F00;
+        line-height: 2;
+      "

You can now change this setting as well, global.vueSnapshots.formatter.inlineStylesPerLine = 0;. It defaults to 1 just like attributesPerLine and classesPerLine.

Diff:

• v2.9.0...v2.10.0

v2.9.0 - attributesNotToStringify

Features:

• By default, stringifyAttributes will no longer convert object-based style attributes to stringified objects, allowing Vue to convert them to actual DOM valid strings.

Expect snapshot changes similar to this:

-      style="{ top: 0, height: 0, --v-progress-linear-height: '2px' }"
+      style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"

If you prefer the object look, you can set global.vueSnapshots.attributesNotToStringify = [];.

If there are other attributes you want skipped in the stringifyAttributes process, you can add them to the attributesNotToStringify array.

Diff:

• v2.8.0...v2.9.0

v2.8.0 - stringifyAttributes improvements

Features:

• Minor improvements to stringifyAttributes:
  • Values of undefined are now removed from objects
  • Better whitespace

Expect snapshot changes similar to this:

 <div>
-  <my-child-stub someprop="{aaa:2,bbb:undefined,ccc:true}" />
+  <my-child-stub someprop="{ aaa: 2, ccc: true }" />
 </div>

Diff:

• v2.7.1...v2.8.0

v2.7.1 - @Testing-Library/Vue container support

Features:

• Adds support for @Testing-Library/Vue containers:

const { container } = render(MyComponent);

expect(container)
  .toMatchSnapshot();

Diff:

• v2.7.0...v2.7.1

v2.7.0 - @Testing-Library/Vue support

Features:

• Library now has full support for @vue/test-utils and also @testing-library/vue (Thanks to @dre-atc)

Maintenance:

• Updated types.js
• Updated dependencies
• Updated Node

Diff:

• v2.6.0...v2.7.0

v2.6.0 - Stubs

Features:

• New "stubs" feature lets you target any element via CSS selectors and remove their innerHTML, attributes, and rename the tag.
• Example:

global.vueSnapshots.stubs = ['.example'];

<div class="example" title="parent">
  <span title="child">child</span>
</div>
<!-- becomes -->
<example-stub />

Maintenance:

• Updated types.js
• Updated dependencies
• Updated Node

Diff:

• v2.5.0...v2.6.0

v2.5.0 - Debug/Troubleshooting

Features:

• Added global.vueSnapshots.debug = true option to help in troubleshooting.

Maintenance:

• Updated dependencies
• Updated types.js for new API
• Test coverage remains at 100%

Diff:

• v2.4.0...v2.5.0