expect-jsx

    5.0.0 • Public • Published

    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:

    Install

    npm i expect-jsx

    DownloadsWeekly Downloads

    3,054

    Version

    5.0.0

    License

    MIT

    Last publish

    Collaborators

    • vvo