unexpected-preact

The preact.js version of unexpected-react

Installation

npm install --save-dev unexpected unexpected-preact

Usage

ES6:

import unexpected from 'unexpected';
import unexpectedPreact from 'unexpected-preact';
 
const expect = unexpected.clone().use(unexpectedPreact);

ES5

var unexpected = require('unexpected');
var unexpectedPreact = require('unexpected-preact');
 
var expect = unexpected.clone().use(unexpectedPreact);

For Jest, require/import unexpected-preact/jest

With jest, you can use the snapshot test functionality - see the 'to match snapshot' assertion

Example test

it('increases the count on click', function () {
  expect(<ClickCounter />,
    'when rendered',
    'with event', 'click', 'on', <button />,
    'to have rendered',
    <div>
      <span>Clicked 1 times</span>
      <button />
    </div>);
});

Read the full documentation for the assertions

Only deep (DOM) rendering is possible with preact, but you still get the full virtual tree as you see in the react-devtools, with all HTML elements and custom components.

FAQ

Q: I get an error about SVGElement is not defined with Preact v6 and jest

A: Just define a global SVGElement function before you use Preact to render something

if (!window.SVGElement) window.SVGElement = function () {};

Status

Whilst this should be considered beta, it is based on unexpected-react and the supporting libraries, which have been used for production tests for well over a year in many large projects. We've also got a very comprehensive test suite and integration test suite, so if something were fundamentally broken we'd know quickly.

This library is maintained, and welcomes PRs and issues - please raise an issue if you have questions!

License

MIT