Registry / testing / jest-serializer-vue

jest-serializer-vue

library3.1.0jsnpmunverified

jest-serializer-vue is a utility package designed to enhance Jest snapshot testing for Vue components. It enables Jest to serialize Vue Test Utils `Wrapper` instances directly into human-readable HTML snapshots, simplifying the process by eliminating the need to explicitly call `.html()` on the wrapper before `toMatchSnapshot()`. The package's current stable version is 3.1.0, however, it was last published approximately three years ago (around 2021), indicating a very infrequent or effectively ceased release cadence. While it provided a crucial function for Vue 2 development workflows, a key limitation is its inherent lack of official support for Vue 3 components. Users working with Vue 3 typically need to resort to alternative snapshot serializers, such as `vue3-snapshot-serializer`, or implement custom workarounds to achieve desired snapshot outputs. The project appears to be in a state of low maintenance by its original author, which might lead to compatibility issues with newer versions of Jest or Vue Test Utils. Its primary use case is configured via the Jest `snapshotSerializers` option.

testing

npm install jest-serializer-vue

github ↗package ↗

INSTALL

IMPORT

SIG · JEST-SERIALIZER-VU

jest-serializer-vue

testingjavascriptv3.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

jest-serializer-vue path

✓ // jest.config.js module.exports = { // ... other Jest config "snapshotSerializers": [ "<rootDir>/node_modules/jest-serializer-vue" ] }

✗ import jestSerializerVue from 'jest-serializer-vue'

This package is not imported as a JavaScript module but configured as a path string in Jest's `snapshotSerializers` option.

This example demonstrates how to use `jest-serializer-vue` to generate pretty-printed HTML snapshots directly from a Vue Test Utils `Wrapper` instance without needing to call `.html()`.

import { shallowMount } from '@vue/test-utils'; import Basic from './Basic.vue'; // jest.config.js (add this to your Jest configuration) // module.exports = { // "snapshotSerializers": [ // "<rootDir>/node_modules/jest-serializer-vue" // ] // }; describe('Basic.vue', () => { it('renders correctly', () => { const wrapper = shallowMount(Basic); // The serializer ensures 'wrapper' is pretty-printed as HTML expect(wrapper).toMatchSnapshot(); }); });

Debug

Known issues

breakingVersion 2.0.0 introduced a breaking change that allows direct serialization of Vue Test Utils Wrapper instances. Previously, users had to call `.html()` on the wrapper before `toMatchSnapshot()`.

fix

Remove `.html()` calls before `toMatchSnapshot()` when using Wrapper instances. For example, change `expect(wrapper.html()).toMatchSnapshot()` to `expect(wrapper).toMatchSnapshot()`.

affects: >=2.0.0

gotchaThis package does not officially support Vue 3. Attempting to serialize Vue 3 components directly may result in unreadable object snapshots or unexpected behavior.

fix

For Vue 3 projects, consider using alternative serializers such as `vue3-snapshot-serializer` (recommended) or a deprecated fork like `jest-serializer-vue-tjw`. If forced to use this package, a workaround involves manually accessing `component.__app._container` on the wrapper, though this is not officially supported and may break.

affects: >=3.1.0

deprecatedThe `jest-serializer-vue` package is no longer actively maintained by its original author. The last release was approximately three years ago, which may lead to compatibility issues with newer versions of Jest, Vue, or Vue Test Utils.

fix

For new projects, especially those using Vue 3, consider using actively maintained alternatives like `vue3-snapshot-serializer`. For existing Vue 2 projects, be aware of potential future compatibility problems and consider migrating if issues arise.

affects: >=3.1.0

Errors

Common errors & fixes

Module jest-serializer-vue in the snapshotSerializers option was not found.

The path to `jest-serializer-vue` in the Jest configuration is incorrect or the package is not installed.

fix

Ensure `jest-serializer-vue` is installed (`npm install --save-dev jest-serializer-vue`) and the path in `jest.config.js` is correct, typically `"<rootDir>/node_modules/jest-serializer-vue"`.

Error: Jest: a snapshot serializer must be a string or a module.

The Jest configuration for `snapshotSerializers` contains an invalid entry, often a direct `require()` or `import` instead of a string path.

fix

Ensure each entry in the `snapshotSerializers` array is a string representing the path to the serializer module, e.g., `"<rootDir>/node_modules/jest-serializer-vue"`.

Snapshot contains a large, unreadable object representation instead of HTML for a Vue component.

The serializer is not correctly applied, or the component being tested is a Vue 3 component which this serializer does not support.

fix

Verify that `jest-serializer-vue` is correctly listed in `snapshotSerializers` in your `jest.config.js`. If using Vue 3, switch to `vue3-snapshot-serializer` or use a specific Vue 3 workaround like `expect(component.__app._container).toMatchSnapshot()`.

Upgrade

Version history

3.1.0latest on npm

Audit

Dependencies

jestrequiredRuntime dependency for Jest's snapshot testing framework.

@vue/test-utilsrequiredProvides the Vue component wrappers that are serialized.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/eddyerburgh/jest-serializer-vue ↗

packagehttps://www.npmjs.com/package/jest-serializer-vue ↗