https://github.com/jeysal/pretty-format-snabbdom

pretty-format (Jest snapshot) plugin for snabbdom VNodes
https://github.com/jeysal/pretty-format-snabbdom

Last synced: 4 months ago
JSON representation

pretty-format (Jest snapshot) plugin for snabbdom VNodes

• Host: GitHub
• URL: https://github.com/jeysal/pretty-format-snabbdom
• Owner: jeysal
• License: mit
• Created: 2017-11-05T21:31:57.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T08:19:19.000Z (almost 3 years ago)
• Last Synced: 2025-06-29T17:18:22.451Z (5 months ago)
• Language: JavaScript
• Size: 1.38 MB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 14
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-cyclejs - jeysal/pretty-format-snabbdom ★0 - A [pretty-format](https://github.com/facebook/jest/tree/master/packages/pretty-format) ([Jest](https://facebook.github.io/jest/) snapshot) plugin for rendering snapshots of snabbdom VNodes as nicely as those of React elements (Libraries / Testing)

README

          
# pretty-format-snabbdom

> [pretty-format](https://github.com/facebook/jest/tree/master/packages/pretty-format)

([Jest](https://facebook.github.io/jest/) snapshot) plugin for

[snabbdom](https://github.com/snabbdom/snabbdom) VNodes

[![build status](https://img.shields.io/travis/jeysal/pretty-format-snabbdom/master.svg?style=flat-square)](https://travis-ci.org/jeysal/pretty-format-snabbdom)

[![AppVeyor build status](https://img.shields.io/appveyor/ci/jeysal/pretty-format-snabbdom/master.svg?style=flat-square&label=windows+build)](https://ci.appveyor.com/project/jeysal/pretty-format-snabbdom)

[![code coverage](https://img.shields.io/codecov/c/github/jeysal/pretty-format-snabbdom/master.svg?style=flat-square)](https://codecov.io/gh/jeysal/pretty-format-snabbdom)

[![npm package](https://img.shields.io/npm/v/pretty-format-snabbdom.svg?style=flat-square)](https://www.npmjs.com/package/pretty-format-snabbdom)

[![license](https://img.shields.io/github/license/jeysal/pretty-format-snabbdom.svg?style=flat-square)](https://github.com/jeysal/pretty-format-snabbdom/blob/master/LICENSE)

[Jest](https://facebook.github.io/jest/) snapshots have greatly simplified

testing the VDOM output of React components.

If your application is based on the [snabbdom](https://github.com/snabbdom/snabbdom)

virtual DOM implementation (like e.g. [Cycle.js](https://github.com/cyclejs/cyclejs) apps),

you were previously out of luck, because snapshotting snabbdom VNodes

would result in huge object descriptions that were hard to read.

**pretty-format-snabbdom** makes Jest snapshots of snabbdom VNodes look

just as pretty as those of React elements,

using [pretty-format](https://github.com/facebook/jest/tree/master/packages/pretty-format)s plugin system.

## Usage

```bash

npm install --save-dev pretty-format-snabbdom

```

[Register](https://facebook.github.io/jest/docs/en/configuration.html#snapshotserializers-array-string) in your `.jestrc`:

```json

{

  "snapshotSerializers": ["pretty-format-snabbdom"]

}

```

or [right in your test files](https://facebook.github.io/jest/docs/en/expect.html#expectaddsnapshotserializerserializer):

```javascript

import prettyFormatSnabbdom from 'pretty-format-snabbdom';

expect.addSnapshotSerializer(prettyFormatSnabbdom);

```

### Before

```

Object {

  "children": Array [],

  "data": Object {

    "data": Object {

      "stuff": "stuff",

    },

    "ns": undefined,

    "props": Object {

      "className": "cl",

      "id": "id",

      "onclick": [Function],

      "title": "title",

    },

    "style": "color: black;",

  },

  "key": undefined,

  "sel": "div",

}

```

### After

```



```