react-vdom

Important

If you are using React v0.13 you may want to install react-vdom v0.5.

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));

outputs

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

Setup

npm install react-vdom

Api

vdom(element, [state])

• element a ReactElement
• state inject a state

Returns a JSON containing a synthetic VDOM.

License (MIT)