algoliaexpect-jsx
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
- API
- Usage
- A note about functions
- Environment requirements
- Test
- Build
- Release
- Similar projects
- Thanks
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:
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: