expect-jsx

[![Version][version-svg]][package-url] [![Build Status][travis-svg]][travis-url] [![License][license-image]][license-url] [![Downloads][downloads-image]][downloads-url]

[travis-svg]: https://img.shields.io/travis/algolia/expect-jsx/master.svg?style=flat-square
[travis-url]: https://travis-ci.org/algolia/expect-jsx
[license-image]: http://img.shields.io/badge/license-MIT-green.svg?style=flat-square
[license-url]: LICENSE
[downloads-image]: https://img.shields.io/npm/dm/expect-jsx.svg?style=flat-square
[downloads-url]: http://npm-stat.com/charts.html?package=expect-jsx
[version-svg]: https://img.shields.io/npm/v/expect-jsx.svg?style=flat-square
[package-url]: https://npmjs.org/package/expect-jsx
[screenshot]: ./screenshot.png

toEqualJSX for mjackson/expect.

It uses algolia/react-element-to-jsx-string in the background to turn React elements into formatted strings.

Table of Contents generated with DocToc

- Setup
- API
- Usage
- A note about functions
- Environment requirements
- Test
- Build
- Release
- Similar projects
- Thanks

Setup

You will most probably use this plugin as a development dependency.

``sh yarn add expect-jsx --dev`

`API`

`Usage`

Here's an example using mochajs/mocha.

`js import React from 'react'; import expect from 'expect'; import expectJSX from 'expect-jsx';

expect.extend(expectJSX);

class TestComponent extends React.Component {}

describe('expect-jsx', () => { it('works', () => { expect(

).toEqualJSX(

);
    // ok
    expect(

).toEqualJSX(

);
    // Error: Expected '' to equal '

'
    expect().toNotEqualJSX(

);
    // ok
    expect(
).toIncludeJSX();
    // ok
  });
});


It looks like this when ran:
![Screenshot when using mocha][screenshot]
A note about functions

toEqualJSX will not check for function references, it only checks that if a functionwas expected somewhere, there's also a function in the actual data.

It's your responsibility to then unit test those functions.

`Environment requirements`

The environment you use to use react-element-to-jsx-string should have ES2015 support.

Use the Babel polyfill or any other method that will make you environment behave like an ES2015 environment.

`Test`

`sh yarn test yarn test:watch`

`Build`

`sh yarn build yarn build:watch`

`Release`

Decide if this is a patch, minor or major release, look at http://semver.org/

`sh yarn release [major|minor|patch|x.x.x]`

`Similar projects`

There are multiple similar projects for other assertions libraries, all based on algolia/react-element-to-jsx-string. For instance:

* chai-equal-jsx, assertions for chai:expect(

).to.equalJSX(

);


* chai-jsx, assertions for chai:

expect(

).jsx.to.equal(

);


* jsx-chai, assertions for chai:

expect(

).to.deep.equal(

);


* tape-jsx-equals, assertions for tape:

t.jsxEquals(

);


* jasmine-expect-jsx, assertions for jasmine:

expect(

).toEqualJSX(

);`

Thanks

To the people pointing me in the right directions like:
- https://github.com/facebook/react/issues/4835
- https://github.com/mjackson/expect/issues/37