Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Note from maintainers Since Jest supports snapshot testing, we recommend you to use that instead of expect-jsx.

expect-jsx is no more compatible with recent Jest versions (22), it can be made compatible so feel free to open a PR if so.


Version Build Status License Downloads

toEqualJSX for mjackson/expect.

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

Table of Contents generated with DocToc


You will most probably use this plugin as a development dependency.

yarn add expect-jsx --dev


  • expect(ReactComponent|JSX).toEqualJSX(ReactComponent|JSX)
  • expect(ReactComponent|JSX).toNotEqualJSX(ReactComponent|JSX)
  • expect(ReactComponent|JSX).toIncludeJSX(ReactComponent|JSX)
  • expect(ReactComponent|JSX).toNotIncludeJSX(ReactComponent|JSX)


Here's an example using mochajs/mocha.

import React from 'react';
import expect from 'expect';
import expectJSX from 'expect-jsx';


class TestComponent extends React.Component {}

describe('expect-jsx', () => {
  it('works', () => {
    expect(<div />).toEqualJSX(<div />);
    // ok

    expect(<div a="1" b="2" />).toEqualJSX(<div />);
    // Error: Expected '<div\n  a="1"\n  b="2"\n/>' to equal '<div />'

    expect(<span />).toNotEqualJSX(<div/>);
    // ok

    expect(<div><TestComponent /></div>).toIncludeJSX(<TestComponent />);
    // ok

It looks like this when ran:

Screenshot when using mocha

A note about functions

toEqualJSX 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.

Environment requirements

The environment you use to use react-element-to-jsx-string should have ES2015 support.

Use the Babel polyfill or any other method that will make you environment behave like an ES2015 environment.


yarn test
yarn test:watch


yarn build
yarn build:watch


Decide if this is a patch, minor or major release, look at

yarn release [major|minor|patch|x.x.x]

Similar projects

There are multiple similar projects for other assertions libraries, all based on algolia/react-element-to-jsx-string. For instance:

  • chai-equal-jsx, assertions for chai: expect(<div />).to.equalJSX(<div />);
  • chai-jsx, assertions for chai: expect(<div />)<div />);
  • jsx-chai, assertions for chai: expect(<div />).to.deep.equal(<div />);
  • tape-jsx-equals, assertions for tape: t.jsxEquals(<div />, <div />);
  • jasmine-expect-jsx, assertions for jasmine: expect(<div />).toEqualJSX(<div />);


To the people pointing me in the right directions like: