pretty-format-snabbdom

pretty-format (Jest snapshot) plugin for snabbdom VNodes

Jest snapshots have greatly simplified testing the VDOM output of React components. If your application is based on the snabbdom virtual DOM implementation (like e.g. Cycle.js 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-formats plugin system.

Usage

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

Register in your .jestrc:

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

or right in your test files:

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

<div
  style="color: black;"
  data={
    Object {
      "stuff": "stuff",
    }
  }
  id="id"
  className="cl"
  title="title"
  onclick={[Function]}
/>