A Jest snapshot serializer that beautifies 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 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:

`json
"jest": {
"snapshotSerializers": ["jest-serializer-html"]
}
`

Vanilla JS Example

`js
test('should beautify HTML', () => {
expect('

• My HTML

').toMatchSnapshot();
});
`

Will output:

`js
exports[should beautify HTML 1] =

• 
  
  My HTML
  
  

;
`

Vue.js component output example

`js
import Vue from 'vue';
const Hello = {
props: {
msg: {
type: String,
default: 'World'
}
},
template:

Hello ${ msg }!

• My HTML

};

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!

class="list"
>

• 
  
  My HTML
  
  

;
``

You can read more about the HTML formatting here.

Special thanks

This package was inspired by the amazing post here: Jest for all: Episode 1 — Vue.js by Cristian Carlesso.