tape-jsx-equals

Tape extension to compare React components.

tape-jsx-equals uses react-element-to-jsx-string to compare the component rendered output with the expected output.

Install

$ npm install --save-dev extend-tape
$ npm install --save-dev tape-jsx-equals

How to use

Testing React components is very easy with tape + tape-jsx-equals:

const MyComponent = function ({color}) {
    const className = `box color-${color}`;
    return (
        <div className={className}></div>
    );
};

import {createRenderer} from 'react-addons-test-utils';
import tape from 'tape';
import addAssertions from 'extend-tape';
import jsxEquals from 'tape-jsx-equals';
import MyComponent from '../MyComponent';
 
// extend tape with jsxEqual assertion:
const test = addAssertions(tape, {jsxEquals});
 
test('MyComponent is properly rendered', (t) => {
    const renderer = createRenderer();
    renderer.render(<MyComponent color="red" />);
    const result = renderer.getRenderOutput();
 
    // compare output with the expected result:
    t.jsxEquals(result, <div className="box color-red"></div>);
    t.end();
});

Run tests

$ npm install
$ npm test