JavaScript
Latest commit 7c6090b May 17, 2017 @developit committed on GitHub Merge pull request #48 from developit/greenkeeper/initial
Update dependencies to enable Greenkeeper 🌴
Permalink
Failed to load latest commit information.
src Moving towards something for #30: add loose comparison modes via `opt… Sep 20, 2016
test Moving towards something for #30: add loose comparison modes via `opt… Sep 20, 2016
.editorconfig Repo setup Dec 22, 2015
.eslintrc Little cleanup Sep 20, 2016
.gitignore
.npmignore Repo setup Dec 22, 2015
.travis.yml Just run tests under node 4 Dec 22, 2015
LICENSE Repo setup Dec 22, 2015
README.md docs(readme): add Greenkeeper badge May 9, 2017
package.json

README.md

preact-jsx-chai

Greenkeeper badge

NPM travis-ci

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;

Testing Preact Components

Assertions are supported for both functional and classical components.

Typically, JSX assertions follow a pattern where the component to be tested is passed to expect() with any props necessary, and the expected DOM state is passed to .eql() (or its alias .deep.equal()):

// Supports both functional and classical components
const Link = ({ url, text }) => (
	<a class="link" href={'/'+href}>Link: { text }</a>
);

expect(
	<Link url="?foo" text="foo" />
).to.eql(
	<a href="/?foo">Link: foo</a>
);

License

MIT