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: 5 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