# vue-snapshot-serializer

> vuejs snapshot serializer. with props, data and computed support

Latest version **1.0.2** (published 2023-12-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-snapshot-serializer
pnpm add vue-snapshot-serializer
yarn add vue-snapshot-serializer
bun add vue-snapshot-serializer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2023-12-19 |
| First published | 2022-10-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 5.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Sebastian Plaza |
| Maintainers | sebaplaza |

## Links

- npm: https://www.npmjs.com/package/vue-snapshot-serializer
- Repository: https://github.com/sebaplaza/vue-snapshot-serializer
- Homepage: https://github.com/sebaplaza/vue-snapshot-serializer#readme
- Issues: https://github.com/sebaplaza/vue-snapshot-serializer/issues
- npm.io page: https://npm.io/package/vue-snapshot-serializer

## Dependencies (2)

- [@prettier/sync](https://npm.io/package/@prettier/sync.md) ^0.3.0
- [fast-safe-stringify](https://npm.io/package/fast-safe-stringify.md) ^2.1.1

## Recent versions

- 1.0.2 (latest) — 2023-12-19
- 1.0.1 — 2023-12-19
- 1.0.0 — 2023-12-19
- 0.1.1 — 2022-10-04
- 0.1.0 — 2022-10-04

## README

# vue-snapshot-serializer

vuejs snapshot serializer. with props, data and computed support

## How to

```sh
# prettier is a requirement
npm add -D vue-snapshot-serializer prettier
```

In your jest/vitest config

```js
"snapshotSerializers": [
  "<rootDir>/node_modules/vue-snapshot-serializer"
]
```

## How it looks like ?

A snapshot is **just a string**. We use to make snapshots of DOM (html string), but we could print whatever we want

I decided that is better to show the html, props, data and computed properties in differents sections of html.

- At first we always have the html Snapshot
- Then, the following sections
  - `<pre id="props-snapshot">`
  - `<pre id="data-snapshot">`
  - `<pre id="computed-snapshot">`

Everything is formatted by [prettier](https://prettier.io/), to avoid wrong diff results.

So, a typical snapshot with this library will be something like

```html
// Jest Snapshot v1, https://goo.gl/fbAQLP `; exports[`path/to/my/component/file
This is the description of my test`] = `
<div class="my-div">
	<div class="my-inner-div">
		<span>This is my message</span>
		<my-component
			first-prop="value-of-first-prop"
			second-prop="[Object object]"
		></my-component>
	</div>
</div>
<pre id="props-snapshot">
{
  "fooProp": "abcd123",
  "barProp": false
}
</pre>
<pre id="data-snapshot">
{
  "fooData": {
    "fooInnerDataNumber: 23,
    "fooInnerDataString: "i am a string"
  }
}
</pre>
<pre id="computed-snapshot">
{
  "fooComputed" : {
    fooValue: 444
  }
}
</pre>
```

---
_Source: https://npm.io/package/vue-snapshot-serializer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._