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.

Package detail

jest-serializer-html-string

readme

jest-serializer-html-string

Example

Given:

Produces beautified snapshot:

Setup

Install from npm:

Add it to your Jest config:

License