https://github.com/developit/preact-jsx-chai
:white_check_mark: Add JSX assertions to Chai, with support for Preact Components.
https://github.com/developit/preact-jsx-chai
chai chai-plugin jsx-assertions jsx-chai preact test testing
Last synced: about 1 month ago
JSON representation
:white_check_mark: Add JSX assertions to Chai, with support for Preact Components.
- Host: GitHub
- URL: https://github.com/developit/preact-jsx-chai
- Owner: developit
- License: mit
- Created: 2015-12-22T00:05:32.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-05-29T20:15:31.000Z (almost 5 years ago)
- Last Synced: 2025-04-10T11:16:10.293Z (about 1 month ago)
- Topics: chai, chai-plugin, jsx-assertions, jsx-chai, preact, test, testing
- Language: JavaScript
- Homepage: http://npm.im/preact-jsx-chai
- Size: 122 KB
- Stars: 56
- Watchers: 3
- Forks: 7
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-preact - Preact JSX Chai - JSX assertion testing _(no DOM, right in Node)_. (Uncategorized / Uncategorized)
README
# preact-jsx-chai
[](https://greenkeeper.io/)
[](https://www.npmjs.com/package/preact-jsx-chai)
[](https://travis-ci.org/developit/preact-jsx-chai)
Extend Chai with support for asserting JSX equality & contents with support for [Preact] Components.
(Heavily) inspired by [jsx-chai].
---
### Usage
```js
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(
a
).to.deep.equal(
a
);
// check if a given JSX DOM contains the given fragment:
expect(
foo!
).to.contain(
foo!
);
```
> **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:
```js
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`
```js
let Outer = ({a}) =>
let Inner = ({a}) =>
{a}
// JSX tests
expect().to.be.jsx
expect('Outer').to.not.be.jsx
// Deep equality tests
expect().to.deep.equal()
expect().to.deep.equal(
foo/>)
expect().to.not.deep.equal()
expect().to.eql() // .eql is shorthand for .deep.equal
expect().to.not.eql()
// Shallow Equality tests
expect().to.equal()
expect().to.not.equal()
expect().to.not.equal(
foo) // is not rendered
let WrappedOuter = ({a}) =>
// Deep includes/contains tests
expect().to.include(
foo)
expect().to.contain(foo)
expect().to.contain()
expect().to.not.include(Bad Div)
// Shallow includes/contains tests
expect().to.shallow.contain()
expect().to.not.shallow.include(
foo)
```
---
### License
[MIT]
[Preact]: https://github.com/developit/preact
[jsx-chai]: https://github.com/bkonkle/jsx-chai
[MIT]: http://choosealicense.com/licenses/mit/