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

v2.4.0 - Checkbox/Radio Dial "checked" attribute

Features:

• If using global.vueSnapshots.addInputvalues = true;" (on by default), your snapshots will now include a checked` attribute for Checkboxes and radio dials.
  • <input checked="true" type="radio">
  • <input checked="false" type="checkbox">

Maintenance:

• Test coverage remains at 100%

Diff:

• v2.3.0...v2.4.0

v2.3.0 - Classic Formatter

Features:

• The formatter used by jest-serializer-vue-tjw is now available in vue3-snapshot-serializer as "Classic"
  • global.vueSnapshots.formatter = 'classic'; - Switch from 'diffable' to 'classic'
  • global.vueSnapshots.classicFormatter = {}; - pass in any settings. They are documented in types.js

Maintenance:

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

Diff:

• v2.2.0...v2.3.0