Miss any of our Open RFC calls?Watch the recordings here! »


4.0.0 • Public • Published


Version Build Status License Downloads

A port of Algolia's expect-jsx for the Chai assertion library.

It uses algolia/react-element-to-jsx-string in the background to turn React elements into formatted strings.

What's different from chai-jsx? The chai-jsx project was started after this one, but it made it to npm faster. This project was renamed to jsx-chai, and has a few key differences:

  • The jsx flag is not necessary when checking equality. If the value is a JSX element and the deep flag is enabled (either by using it explicitly, or by using eql instead of equal) then JSX comparison is performed.
  • A to.be.jsx assertion is included.
  • A browser bundle is included in the dist folder.


First make sure you have the peerDependencies installed:

npm install react

Then install jsx-chai:

npm install jsx-chai --save-dev


JSX comparison will kick in on deep equality checks, but normal strict equality will apply when the 'deep' flag is not used.

    expect(<Component prop='value'/>).to.not.deep.equal(<Component prop='other-value'/>)
    expect(<Component prop='value'/>).to.not.eql(<Component otherProp='value'/>)

Note: include.keys() calls will look for normal object properties, and will not use JSX comparison.


Here's an example using mochajs/mocha.

import chai, {expect} from 'chai'
import jsxChai from 'jsx-chai'
import React from 'react'
class TestComponent extends React.Component {}
describe('jsx-chai', () => {
  it('works', () => {
    // ok
    expect(<div a="1" b="2"/>).to.deep.equal(<div/>)
    // Error: Expected '<div\n  a="1"\n  b="2"\n/>' to equal '<div />'
    // ok
    // ok

It looks like this when ran:

Screenshot when using mocha

A note about functions

to.deep.equal and to.eql will not check for function references, it only checks that if a function was expected somewhere, there's also a function in the actual data.

It's your responsibility to then unit test those functions.

A note about the browser bundle

If you're using the browser bundle in dist with standard browser globals, make sure you are using the un-minified development version of React with addons. This library uses React.addons.TestUtils, which is not available in the production build or the build without addons.


npm i jsx-chai

DownloadsWeekly Downloads






Last publish


  • avatar