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';
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.
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 |
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 />).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>)