Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/algolia/expect-jsx

✅ toEqualJSX for expect assertion library
https://github.com/algolia/expect-jsx

expect jest jsx react

Last synced: 23 days ago
JSON representation

✅ toEqualJSX for expect assertion library

Awesome Lists containing this project

README 

        
**Note from maintainers** Since Jest supports [snapshot testing](https://facebook.github.io/jest/docs/en/snapshot-testing.html), we recommend you to use that instead of `expect-jsx`.



`expect-jsx` is no more compatible with recent Jest versions (22), it can be made compatible so feel free to open a PR if so.



# 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](https://github.com/mjackson/expect).



It uses [algolia/react-element-to-jsx-string](https://github.com/algolia/react-element-to-jsx-string) in the background to turn React elements into formatted strings.



**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*



- [Setup](#setup)

- [API](#api)

- [Usage](#usage)

- [A note about functions](#a-note-about-functions)

- [Environment requirements](#environment-requirements)

- [Test](#test)

- [Build](#build)

- [Release](#release)

- [Similar projects](#similar-projects)

- [Thanks](#thanks)



## Setup



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



```sh

yarn add expect-jsx --dev

```



## API



- expect(ReactComponent|JSX).toEqualJSX(ReactComponent|JSX)

- expect(ReactComponent|JSX).toNotEqualJSX(ReactComponent|JSX)

- expect(ReactComponent|JSX).toIncludeJSX(ReactComponent|JSX)

- expect(ReactComponent|JSX).toNotIncludeJSX(ReactComponent|JSX)



## Usage



Here's an example using [mochajs/mocha](https://github.com/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 `function` was

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](https://babeljs.io/learn-es2015/) support.



Use the [Babel polyfill](https://babeljs.io/docs/usage/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](https://github.com/algolia/react-element-to-jsx-string).

For instance:



* [chai-equal-jsx](https://www.npmjs.com/package/chai-equal-jsx), assertions for chai:

  `expect(
).to.equalJSX(
);`

* [chai-jsx](https://www.npmjs.com/package/chai-jsx), assertions for chai:

  `expect(
).jsx.to.equal(
);`

* [jsx-chai](https://github.com/bkonkle/jsx-chai), assertions for chai:

  `expect(
).to.deep.equal(
);`

* [tape-jsx-equals](https://www.npmjs.com/package/tape-jsx-equals), assertions for tape:

  `t.jsxEquals(
, 
);`

* [jasmine-expect-jsx](https://www.npmjs.com/package/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