Preact-jsx-chai NPM

preact-jsx-chai

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

(Heavily) inspired by jsx-chai.

Usage

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

import chai, { expect } from 'chai';
import assertJsx from 'preact-jsx-chai';
chai.use(assertJsx);

// check if two JSX DOMs are deeply equal:
expect(
	<div id="1">a</div>
).to.deep.equal(
	<div id="1">a</div>
);

// check if a given JSX DOM contains the given fragment:
expect(
	<div> <span>foo!</span> </div>
).to.contain(
	<span>foo!</span>
);

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.

Options

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;

Assertions

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 />).to.be.jsx
expect('Outer').to.not.be.jsx

// 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>)