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.
Add the package as a dev-dependency:
# With npm
npm install --save-dev jest-serializer-html
# With yarn
yarn add --dev jest-serializer-htmlUpdate package.json to let Jest know about the serializer:
"jest": {
"snapshotSerializers": ["jest-serializer-html"]
}test('should beautify HTML', () => {
expect('<ul><li><a href="#">My HTML</a></li></ul>').toMatchSnapshot();
});Will output:
exports[`should beautify HTML 1`] = `
<ul>
<li>
<a href="#">
My HTML
</a>
</li>
</ul>
`;import Vue from 'vue';
const Hello = {
props: {
msg: {
type: String,
default: 'World'
}
},
template: `
<h1>Hello ${ msg }!</h1>
<ul id="main-list" class="list"><li><a href="#">My HTML</a></li></ul>
`
};
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:
exports[`should beautify HTML 1`] = `
<h1>
Hello You!
</h1>
<ul id="main-list"
class="list"
>
<li>
<a href="#">
My HTML
</a>
</li>
</ul>
`;You can read more about the HTML formatting here.
This package was inspired by the amazing post here: Jest for all: Episode 1 — Vue.js by Cristian Carlesso.