Jest Serializer for Vue Snapshots

4.0.0 · deprecated · verified Tue Apr 21

jest-serializer-vue-tjw is a Jest snapshot serializer specifically designed to make Vue component snapshots more readable and maintainable by normalizing HTML output. It handles common issues like attribute ordering, inline functions, and various `data-` attributes that can cause unnecessary snapshot churn. The package is currently at version 4.0.0, but this version primarily serves as a deprecation notice. The library is no longer actively maintained and has been replaced by `vue3-snapshot-serializer`. While `jest-serializer-vue-tjw` supported both Vue 2 and Vue 3 (with some caveats for the latter), its replacement is Vue 3-only and introduces several new features and improved configuration options. Users are advised to migrate to `vue3-snapshot-serializer` for new projects or Vue 3 codebases, or to pin this library to `3.x.x` if they must remain on Vue 2.

Common errors

```
Error: Jest: a snapshot serializer must be a string or a module
```
cause Incorrectly specifying the serializer path or importing it directly instead of providing the module path string in `jest.config.js`.

fix Ensure your `jest.config.js`'s `snapshotSerializers` array contains the string path to the serializer, e.g., `"<rootDir>/node_modules/jest-serializer-vue-tjw"`.
```
Snapshots changed unexpectedly (diff shows attribute reordering)
```
cause The `sortAttributes` feature was enabled by default in v3.18.0, causing attributes within HTML tags to be sorted alphabetically.

fix This is often an intentional improvement. Accept the new snapshots or set `sortAttributes: false` in your configuration if you need to preserve original attribute order.
```
Snapshots show 'function () { /* istanbul ignore next */ ... }' artifacts
```
cause Code coverage tools like Istanbul inject comments into compiled code, which can appear in snapshots when inline functions are present and `removeIstanbulComments` is not active.

fix Upgrade to v3.16.0 or later, which enables `removeIstanbulComments` by default, or explicitly set `removeIstanbulComments: true` in your serializer configuration.
```
My Vue 3 project snapshots are not working correctly or the serializer is not recommended.
```
cause This library has limited support for Vue 3 and is officially deprecated in favor of a new, dedicated Vue 3 serializer.

fix Migrate your project to use `vue3-snapshot-serializer` for full Vue 3 compatibility and access to new features. Follow the migration guide in the `jest-serializer-vue-tjw` README.

Warnings

breaking The library is deprecated as of v4.0.0. While v4.0.0 introduces no functional changes from v3.x.x, it adds a deprecation notice on install and strongly recommends migration to `vue3-snapshot-serializer`.
Fix: For new projects or existing Vue 3 projects, migrate to `vue3-snapshot-serializer`. For Vue 2 projects that cannot migrate to Vue 3, pin `jest-serializer-vue-tjw` to `3.x.x` to avoid deprecation warnings.
breaking Improved arrow function detection in v3.20.0 may cause some snapshots to change around inline functions. Comments might also be restored to previous styles.
Fix: Review and update affected snapshots after upgrading to v3.20.0 or later.
breaking Attributes are sorted by default since v3.18.0. This can lead to snapshot diffs where attribute order changes.
Fix: Update snapshots if attribute order changes. To opt-out, set `sortAttributes` to `false` in your configuration.
breaking In v3.16.0, the `removeIstanbulComments` setting was added and enabled by default to clean up Istanbul-injected flags in snapshots when running with code coverage.
Fix: If you relied on Istanbul comments being present in snapshots (unlikely), you can disable `removeIstanbulComments`. Otherwise, review and update snapshots.
breaking A major bump of the HTML parser in v3.15.0 (4.1.0 -> 5.0.0) might cause minor formatting changes, such as end tags appearing on new lines.
Fix: Review and update snapshots to reflect any minor formatting changes.
gotcha Versions prior to `3.14.0` might format empty tags (`<div></div>`) differently when `addInputValues` and `stringifyObjects` are false, potentially splitting them onto two lines.
Fix: Upgrade to v3.14.0 or later, or manually update affected snapshots.

Install

npm install jest-serializer-vue-tjw npm
yarn add jest-serializer-vue-tjw yarn
pnpm add jest-serializer-vue-tjw pnpm

Imports

Snapshot Serializer Configuration
```
"snapshotSerializers": [
  "<rootDir>/node_modules/jest-serializer-vue-tjw"
]
```
This library is configured directly in your Jest or Vitest config file via its path, not via a direct import in test files. It was CommonJS-based.

Configuration options in vue.config.js

wrong:

import { configure } from 'jest-serializer-vue-tjw'

correct:

// vue.config.js
module.exports = {
  pluginOptions: {
    jestSerializerVue: {
      removeDataTest: true
    }
  }
}

Settings were applied via `vue.config.js` or `package.json`, not by importing and calling a configuration function.

Quickstart

Demonstrates the `jest.config.js` setup for integrating the serializer and example configuration settings within `package.json` for customized snapshot behavior.

{
  "jest": {
    "snapshotSerializers": [
      "<rootDir>/node_modules/jest-serializer-vue-tjw"
    ]
  },
  "jest-serializer-vue-tjw": {
    "removeDataTest": true,
    "sortAttributes": true,
    "clearInlineFunctions": true,
    "attributesToClear": ["data-random", "id"]
  }
}

view raw JSON →