karma-chai-equal-jsx

Disclaimer: This repo is a work in progress. For now, I'd recommend importing the chai-equal-jsx plugin into your test bundle directly, like so.

Adds equalJSX and includeJSX methods to chai assertions. Uses Algolia's react-element-to-jsx-string under the hood.

Installation

npm install -D karma-chai-equal-jsx

Setup

// karma.conf.js
module.exports = function(config) {
    config.set({
        // ...etc.
        frameworks: ['chai', 'chai-equal-jsx'],
        plugins: [
            'karma-chai',
            'karma-chai-equal-jsx'
        ],
        /// ...etc.
    })

Usage

The following tests are all passing:

Expect

class TestComponent extends React.Component {}
 
// equalJSX
expect(<div />).to.equalJSX(<div />);
expect(<TestComponent />).to.equalJSX(<TestComponent />);
 
expect(<div />).to.not.equalJSX(<span />);
expect(<TestComponent />).to.not.equalJSX(<span />);
 
// includeJSX
expect(<div><TestComponent /></div>).to.includeJSX(<TestComponent />);
expect(<div><TestComponent /><span /></div>).to.includeJSX(<span></span>);
 
expect(<TestComponent />).to.not.includeJSX(<span></span>);
expect(<div><span /><TestComponent /></div>).to.not.includeJSX(<a />);

Should

class TestComponent extends React.Component {}
 
// equalJSX
(<div />).should.equalJSX(<div />);
(<TestComponent />).should.equalJSX(<TestComponent />);
 
(<div />).should.not.equalJSX(<span />);
(<TestComponent />).should.not.equalJSX(<span />);
 
// includeJSX
(<div><TestComponent /></div>).should.includeJSX(<TestComponent />);
(<div><TestComponent /><span /></div>).should.includeJSX(<span></span>);
 
(<TestComponent />).should.not.includeJSX(<span></span>);
(<div><span /><TestComponent /></div>).should.not.includeJSX(<a />);