Awesome

npm downloads

Compatibility

React: ^0.13.0 -> react-vdom v0.5
React: ^0.14.0, ^15.0.0 -> react-vdom v0.6

The Idea

I wrote this handy little library for testing purposes: you can extract the vdom from a React component and test it against a JSON with simple tools like assert.deepEqual() and without a real DOM. The extracted vdom has the following type definition:

type Node = {
  tag: string,
  attrs: object<name, value>,
  children: undefined | null | Node | Array<Node>
}

If your component handle a private state, you can inject a state to test different configurations.

Basic example

var vdom = require('react-vdom');

// a simple component
var Counter = React.createClass({
  getInitialState: function () {
    return {count: 0};
  },
  render: function () {
    return (
      React.DOM.div(null, this.state.count)
    );
  }
});

var json = vdom(<Counter />);
console.log(json);

outputs

{
  "tag": "div",
  "attrs": {},
  "children": 0
}

Inject a state

var state = {count: 1};
console.log(vdom(<Counter />, state));