https://github.com/algolia/jest-serializer-html
Jest snapshot serializer that beautifies HTML.
https://github.com/algolia/jest-serializer-html
beautifier html jest serializer snapshot unit-testing vue vuejs
Last synced: 3 months ago
JSON representation
Jest snapshot serializer that beautifies HTML.
- Host: GitHub
- URL: https://github.com/algolia/jest-serializer-html
- Owner: algolia
- Created: 2017-04-14T16:53:03.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-03-03T07:43:00.000Z (over 2 years ago)
- Last Synced: 2025-05-08T09:52:16.233Z (5 months ago)
- Topics: beautifier, html, jest, serializer, snapshot, unit-testing, vue, vuejs
- Language: JavaScript
- Size: 222 KB
- Stars: 53
- Watchers: 53
- Forks: 8
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# A Jest snapshot serializer that beautifies HTML.
[](https://npmjs.org/package/jest-serializer-html)
[](https://travis-ci.org/rayrutjes/jest-serializer-html)
When using this Jest serializer, it will turn any string starting with '<' to nicely indented HTML in the snapshot.
This serializer is based on [diffable-html](https://github.com/rayrutjes/diffable-html) which is an opinionated HTML formatter that will ease readability of diffs in case of failing snapshot tests.
## Install
Add the package as a dev-dependency:
```bash
# With npm
npm install --save-dev jest-serializer-html
# With yarn
yarn add --dev jest-serializer-html
```
Update package.json to [let Jest know about the serializer](https://facebook.github.io/jest/docs/configuration.html#snapshotserializers-array-string):
```json
"jest": {
"snapshotSerializers": ["jest-serializer-html"]
}
```
## Vanilla JS Example
```js
test('should beautify HTML', () => {
expect('
').toMatchSnapshot();
});
```
Will output:
```js
exports[`should beautify HTML 1`] = `
`;
```
## Vue.js component output example
```js
import Vue from 'vue';
const Hello = {
props: {
msg: {
type: String,
default: 'World'
}
},
template: `
Hello ${ msg }!
`
};
test('should beautify HTML', () => {
const Component = Vue.extend(Hello);
const vm = new Component({
propsData: {
msg: 'You'
}
});
vm.$mount();
expect(vm.$el.outerHTML).toMatchSnapshot();
});
```
Will output:
```js
exports[`should beautify HTML 1`] = `
Hello You!
`;
```
You can read more about the [HTML formatting here](https://github.com/rayrutjes/diffable-html#readme).
## Special thanks
This package was inspired by the amazing post here: [Jest for all: Episode 1 — Vue.js](https://hackernoon.com/jest-for-all-episode-1-vue-js-d616bccbe186) by [Cristian Carlesso](https://hackernoon.com/@kentaromiura_the_js_guy).