Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Note from maintainers Since Jest supports snapshot testing, 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 Build Status License Downloads

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

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

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.

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(<div />).toEqualJSX(<div />);
    // ok

    expect(<div a="1" b="2" />).toEqualJSX(<div />);
    // Error: Expected '<div\n  a="1"\n  b="2"\n/>' to equal '<div />'

    expect(<span />).toNotEqualJSX(<div/>);
    // ok

    expect(<div><TestComponent /></div>).toIncludeJSX(<TestComponent />);
    // ok
  });
});

It looks like this when ran:

Screenshot when using mocha

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 support.

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

Test

yarn test
yarn test:watch

Build

yarn build
yarn build:watch

Release

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

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(<div />).to.equalJSX(<div />);
  • chai-jsx, assertions for chai: expect(<div />).jsx.to.equal(<div />);
  • jsx-chai, assertions for chai: expect(<div />).to.deep.equal(<div />);
  • tape-jsx-equals, assertions for tape: t.jsxEquals(<div />, <div />);
  • jasmine-expect-jsx, assertions for jasmine: expect(<div />).toEqualJSX(<div />);

Thanks

To the people pointing me in the right directions like:

About

toEqualJSX for expect assertion library

Topics

Resources

License

Packages

No packages published