{"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,"search_vec":"'2':91,147 '3':94,105,131,139 '4.0.0':56 'activ':71 'advis':118 'attribut':36,43 'caus':46 'caveat':97 'churn':49 'codebas':132 'common':33 'compon':21 'configur':114 'current':53 'data':42 'deprec':64 'design':17 'featur':111 'function':39 'handl':32 'html':29 'improv':113 'inlin':38 'introduc':108 'issu':34 'javascript':148 'jest':1,7,13,84,149 'jest-serializer-vue-tjw':6,83 'latter':100 'librari':67,137 'like':35 'longer':70 'maintain':26,72 'make':19 'migrat':120 'must':143 'new':110,127 'normal':28 'notic':65 'option':115 'order':37 'output':30 'packag':51 'pin':135 'primarili':60 'project':128 'readabl':24 'remain':144 'replac':76,102 'serial':2,8,15,81,85,125,150 'serv':61 'sever':109 'snapshot':5,14,22,48,80,124 'specif':16 'support':88 'tjw':10,87 'unnecessari':47 'user':116 'various':41 'version':55,59 'vue':4,9,20,86,90,93,104,130,146,151 'vue3':79,123 'vue3-snapshot-serializer':78,122 'x.x':140","created_at":"2026-04-21T04:49:16.784815+00:00","updated_at":"2026-04-21T04:49:16.784815+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/tjw-lint/jest-serializer-vue-tjw","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/jest-serializer-vue-tjw","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-20","install_tag":null}}