{"id":15129,"library":"jest-serializer-vue-tjw","title":"Jest Serializer for Vue Snapshots","description":"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.","status":"deprecated","version":"4.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/tjw-lint/jest-serializer-vue-tjw","tags":["javascript","jest","serializer","vue"],"install":[{"cmd":"npm install jest-serializer-vue-tjw","lang":"bash","label":"npm"},{"cmd":"yarn add jest-serializer-vue-tjw","lang":"bash","label":"yarn"},{"cmd":"pnpm add jest-serializer-vue-tjw","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","symbol":"Snapshot Serializer Configuration","correct":"\"snapshotSerializers\": [\n  \"<rootDir>/node_modules/jest-serializer-vue-tjw\"\n]"},{"note":"Settings were applied via `vue.config.js` or `package.json`, not by importing and calling a configuration function.","wrong":"import { configure } from 'jest-serializer-vue-tjw'","symbol":"Configuration options in vue.config.js","correct":"// vue.config.js\nmodule.exports = {\n  pluginOptions: {\n    jestSerializerVue: {\n      removeDataTest: true\n    }\n  }\n}"}],"quickstart":{"code":"{\n  \"jest\": {\n    \"snapshotSerializers\": [\n      \"<rootDir>/node_modules/jest-serializer-vue-tjw\"\n    ]\n  },\n  \"jest-serializer-vue-tjw\": {\n    \"removeDataTest\": true,\n    \"sortAttributes\": true,\n    \"clearInlineFunctions\": true,\n    \"attributesToClear\": [\"data-random\", \"id\"]\n  }\n}","lang":"javascript","description":"Demonstrates the `jest.config.js` setup for integrating the serializer and example configuration settings within `package.json` for customized snapshot behavior."},"warnings":[{"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.","message":"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`.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Review and update affected snapshots after upgrading to v3.20.0 or later.","message":"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.","severity":"breaking","affected_versions":">=3.20.0"},{"fix":"Update snapshots if attribute order changes. To opt-out, set `sortAttributes` to `false` in your configuration.","message":"Attributes are sorted by default since v3.18.0. This can lead to snapshot diffs where attribute order changes.","severity":"breaking","affected_versions":">=3.18.0"},{"fix":"If you relied on Istanbul comments being present in snapshots (unlikely), you can disable `removeIstanbulComments`. Otherwise, review and update snapshots.","message":"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.","severity":"breaking","affected_versions":">=3.16.0"},{"fix":"Review and update snapshots to reflect any minor formatting changes.","message":"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.","severity":"breaking","affected_versions":">=3.15.0"},{"fix":"Upgrade to v3.14.0 or later, or manually update affected snapshots.","message":"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.","severity":"gotcha","affected_versions":"<3.14.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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\"`.","cause":"Incorrectly specifying the serializer path or importing it directly instead of providing the module path string in `jest.config.js`.","error":"Error: Jest: a snapshot serializer must be a string or a module"},{"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.","cause":"The `sortAttributes` feature was enabled by default in v3.18.0, causing attributes within HTML tags to be sorted alphabetically.","error":"Snapshots changed unexpectedly (diff shows attribute reordering)"},{"fix":"Upgrade to v3.16.0 or later, which enables `removeIstanbulComments` by default, or explicitly set `removeIstanbulComments: true` in your serializer configuration.","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.","error":"Snapshots show 'function () { /* istanbul ignore next */ ... }' artifacts"},{"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.","cause":"This library has limited support for Vue 3 and is officially deprecated in favor of a new, dedicated Vue 3 serializer.","error":"My Vue 3 project snapshots are not working correctly or the serializer is not recommended."}],"ecosystem":"npm"}