preact-jsx-chai
preact-jsx-chai copied to clipboard
Published
20 hours ago •
developit
developit
:white_check_mark: Add JSX assertions to Chai, with support for Preact Components.
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-chaiwill 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>)
developit