Narrowly Preventing Mayhem

    tape-jsx-equals

    1.0.0 • Public • Published

    tape-jsx-equals

    npm npm

    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
    

    Install

    npm i tape-jsx-equals

    DownloadsWeekly Downloads

    81

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • atabel