Package Exports

jest-serializer-html
jest-serializer-html/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jest-serializer-html) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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:

# 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:

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

Vanilla JS Example

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>
`;

Vue.js component output example

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.

Special thanks

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