Skip to content
Go to file

Latest commit


Git stats


Failed to load latest commit information.


Greenkeeper badge

NPM travis-ci

Extend Chai with support for asserting JSX equality & contents with support for Preact Components.

(Heavily) inspired by jsx-chai.


import { h } from 'preact'; /** @jsx h */

import chai, { expect } from 'chai';
import assertJsx from 'preact-jsx-chai';

// check if two JSX DOMs are deeply equal:
	<div id="1">a</div>
	<div id="1">a</div>

// check if a given JSX DOM contains the given fragment:
	<div> <span>foo!</span> </div>

Note: in environments like Karma where chai is available as a global, preact-jsx-chai will automatically register itself on import. Don't worry, though, this plugin is smart enough to avoid registering itself multiple times.


There are a few global options available to customize how preact-jsx-chai asserts over VNodes.

Name Type Default Description
isJsx Function auto Override the detection of values as being JSX VNodes.
functions Boolean true If false, props with function values will be omitted from the comparison entirely
functionNames Boolean true If false, ignores function names and bound state, asserting only that the compared props are functions
To set these options:
import { options } from 'preact-jsx-chai';
options.functions = false;

// or:

import jsxChai from 'preact-jsx-chai';
jsxChai.options.functions = false;


Deep, fully rendered equality/inclusion is checked for: .deep.equal, .eql, .include, and .contain

Shallow, JSX only equality/inclusion is checked for: .equal, .shallow.include, and .shallow.contain

let Outer = ({a}) => <Inner a={a}/>
let Inner = ({a}) => <div>{a}</div>

// JSX tests
expect(<Outer />)

// Deep equality tests
expect(<Outer a="foo"/>).to.deep.equal(<Inner a="foo" notRenderedProp="x" />)
expect(<Outer a="foo"/>).to.deep.equal(<div>foo</div>/>)
expect(<Outer a="foo"/>).to.not.deep.equal(<Inner a="NotBar"/>)
expect(<Outer />).to.eql(<Outer />) // .eql is shorthand for .deep.equal
expect(<Outer a="foo"/>).to.not.eql(<Inner a="NotFoo"/>)

// Shallow Equality tests
expect(<Outer a="foo"/>).to.equal(<Inner a="foo" />)
expect(<Outer a="foo"/>).to.not.equal(<Inner a="foo" verifiedJSXProp="x" />)
expect(<Outer a="foo"/>).to.not.equal(<div>foo</div>) // <Inner /> is not rendered

let WrappedOuter = ({a}) => <div id="outer"><Inner a={a} /></div>

// Deep includes/contains tests
expect(<WrappedOuter a="foo" />).to.include(<div>foo</div>)
expect(<WrappedOuter a="foo" />).to.contain(<div>foo</div>)
expect(<WrappedOuter a="foo" />).to.contain(<Inner a="foo" />)
expect(<WrappedOuter a="foo" />).to.not.include(<div>Bad Div</div>)

// Shallow includes/contains tests
expect(<WrappedOuter a="foo" />).to.shallow.contain(<Inner a="foo" />)
expect(<WrappedOuter a="foo" />).to.not.shallow.include(<div>foo</div>)



You can’t perform that action at this time.