jest serializer html string

A better Jest snapshot serializer for plain html strings

JavaScript

jest-serializer-html-string

A slightly better Jest snapshot serializer for working with strings containing rendered html.

Example

Given:

function renderElem(props) {
	return `<body>
				<div class="home active">
					<h1><img src="${ props.img }" alt="Foo"/></h1><div>Hello</div>
					<p><span class="something">Hey</span>
					<img src="${ props.img }" /></p>
				</div>
			</body>
	`;
}

expect(renderElem({ img: '/foo.png' })).toMatchSnapshot();

Produces beautified snapshot:

<body>
  <div class="home active">
    <h1>
      <img src="/foo.png" alt="Foo" />
    </h1>
    <div>Hello</div>
    <p>
      <span class="something">Hey</span>
      <img src="/foo.png" />
    </p>
  </div>
</body>

Setup

Install from npm:

npm install --save-dev jest-serializer-html-string

Add it to your Jest config:

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

Please refer to the Jest snapshotSerializers config docs if you need more info.