1. expect-jsx
toEqualJSX for mjackson/expect
expect-jsx
Package: expect-jsx
Created by: algolia
Last modified: Fri, 17 Jun 2022 22:01:03 GMT
Version: 5.0.0
License: MIT
Downloads: 8,992
Repository: https://github.com/algolia/expect-jsx

Install

npm install expect-jsx
yarn add expect-jsx

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:

  • https://github.com/facebook/react/issues/4835
  • https://github.com/mjackson/expect/issues/37

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code