Plugins

Unexpected is designed to be highly extensible with new data types, assertions, output styles and themes.

Here is a list of plugins that is maintained by the unexpected team.

unexpected-check: Property based testing using unexpected.
unexpected-color: Assertions for strings representing colors.
unexpected-dom: Assertions for XML/HTML DOM and HTML/XML strings. Works in the browser and in node.js via jsdom.
unexpected-events: Assertions for unit testing EventEmitters.
unexpected-exif: Assertions for EXIF data of images (node.js only).
unexpected-express: Express app/middleware assertions with a declarative syntax.
unexpected-http: Assertions for testing local or remote HTTP servers. Browser-compatible via browserify (experimental).
unexpected-image: Assertions for image metadata (node.js only).
unexpected-knockout: Add support for Knockout.js observables.
unexpected-messy: Assertions for HTTP messages (requests and responses) and mails (rfc2822). Browser-compatible.
unexpected-mitm: Mock out HTTP and make assertions about the HTTP traffic that goes on while executing other assertions. Based on the mitm module. Only works with node.js and io.js.
unexpected-moment: Assertions for testing moment.js instances.
unexpected-reaction: An Unexpected plugin to make React testing with unexpected-dom more convenient.
unexpected-resemble: Image resemblance assertions based on resemble.js. Works in both node.js and the browser.
unexpected-set: Add support for Set instances.
unexpected-sinon: Add support for sinon spies.
unexpected-snapshot: Inline snapshot testing.
unexpected-stream: Assertions for node.js streams.

Community plugins

unexpected-couchdb: Run your tests against a mock CouchDB server initialized to a given state.
unexpected-date: Date/time assertions on Date object.
unexpected-eventemitter: Alternative assertions for unit testing EventEmitters.
unexpected-generator: Assertions for ES2015 generators and iterators.
unexpected-preact: Assertions for preact.js
unexpected-react: Assertions for React.js. Assert using JSX.
unexpected-rxjs: Assertions for RxJS.
unexpected-webdriver: Assertions for Selenium WebDriver.

Installation

The recommended way to get plugins is installing them via npm:

$ npm install unexpected-dom

And then in your test suite:

const expect = require('unexpected').clone().use(require('unexpected-dom'));

For plugins that work in the browser, you'll either need to add an extra <script>, or use browserify or a script loader instead of the Common.js require in the above example. Please consult the documentation for each individual plugin.

Mixing plugins

All of these plugins should be able coexist in the same Unexpected instance and compose well together. For instance, you can grab a few and assert that an express app serves an HTML response body that contains a yellow <div>:

const expect = require('unexpected')
  .clone()
  .use(require('unexpected-express'))
  .use(require('unexpected-dom'))
  .use(require('unexpected-color'));
 
const app = require('express')().get('/myPage', function (req, res, next) {
  res.send('<html><body><div style="color: #ff0">Hey!</div></body></html>');
});
 
it('should deliver something pretty', function () {
  return expect(app, 'to yield exchange', {
    request: 'GET /myPage',
    response: {
      headers: { 'Content-Type': 'text/html; charset=utf-8' },
      body: expect.it(
        'when parsed as HTML',
        'queried for first',
        'div',
        'to satisfy',
        {
          attributes: {
            style: {
              color: expect.it('to be colored', 'yellow'),
            },
          },
        }
      ),
    },
  });
});

Or you could assert that a node.js readable stream outputs an image that's at most 10% different from a reference image:

const expect = require('unexpected')
  .clone()
  .use(require('unexpected-stream'))
  .use(require('unexpected-image'))
  .use(require('unexpected-resemble'));
 
it('should spew out the expected image', function () {
  const myStream = require('fs').createReadStream('foo.png');
 
  return expect(
    myStream,
    'to yield output satisfying',
    expect
      .it('to resemble', 'bar.png', {
        mismatchPercentage: expect.it('to be less than', 10),
      })
      .and('to have metadata satisfying', {
        format: 'PNG',
      })
  );
});