Assertion for shallow rendering `equals`

It would be nice to have assertion to check node against node, equals from shallow rendering of enzyme (probably equalsJSX, same to https://github.com/algolia/expect-jsx)

Now

expect(shallow(<Component />).find('SubComponent').equals(<SubComponent foo="bar" />)).to.be.true

Would like to have

expect(shallow(<Component />).find('SubComponent')).to.be.equalsJSX(<SubComponent foo="bar" />)

[vesln]

+1 for .to.equal

[CzBuCHi]

i had same issue and this is my solution for it:

const ReactElementToString = require('react-element-to-string');
chai.use(function(_chai, utils) {
    var Assertion = _chai.Assertion;
    utils.addMethod(_chai.Assertion.prototype, 'equalJsx', function (expected) {
        // TODO: check that this._obj is ShallowWrapper instance 
        // i dont know how to get ShallowWrapper type here... (im using typescript)
        // new Assertion(this._obj).to.be.instanceof(ShallowWrapper);
        const actualString = ReactElementToString(this._obj.instance().render());
        const expectedString = ReactElementToString(expected);
        expect(actualString).to.be.equal(expectedString);
    });
});

usage:

// components
function Foo({ name, value }) { return <div className="Foo"><Bar name={name} value={value} /></div>; }
function Bar({ name, value }) { return <div className="Bar"><Baz name={name} value={value} /></div>; }
function Baz({ name, value }) { return <div className="Baz">{name} - {value}</div>; }

// and inside describe-it:
const actual = shallow(<Foo name="Foo" value="Bar" />);
const expected = <div className="Foo"><Bar name="Foo" value="Foo" /></div>;
expect(actual).to.equalJsx(expected);

and nice error message:

-<div className="Foo">
-  <Bar name="Bar" value="Bar" />
+<div className="Foo2">
+  <Bar name="Foo" value="Foo" />
</div>

---

changed code in package react-element-to-string - props wasnt sorted (not nesseseary - props order is irelevant but if changed tests would fail…)

file: index.js

-26: return Object.keys(element.props || {}).map(function(prop) {
+26: var keys = Object.keys(element.props || {});
+27: keys.sort();
+28: return keys.map(function(prop) {

cheers

edit: sorry for thread necromancy 😃