Expect-react-shallow NPM

expect-react-shallow

A Chai’s expect like API wrapper for unexpected-react. It also accepts JSX instead of ShallowRenderer instance.

expect-react-shallow

Installation

npm install --save-dev expect-react-shallow

Usage

import React from 'react';
import { expect } from 'mocha';
import expectReactShallow from 'expect-react-shallow';

class TestComponent extends React.Component {
	render() {
		return <div className="foo">Hello React!</div>;
	}
}

describe('TestComponent', () => {

 	it('works', () => {

 		// OK
		expectReactShallow(<TestComponent/>)
			.to.have.rendered(<div>Hello React!</div>);

		// OK
		expectReactShallow(<TestComponent/>)
			.to.have.exactly.rendered(<div className="foo">Hello React!</div>);

		// Error
		expectReactShallow(<TestComponent/>)
			.to.have.exactly.rendered(<div/>);

		// OK
		expectReactShallow(<TestComponent/>)
			.to.contain(<div/>);

	});

});

API

expectReactShallow(ReactComponent|JSX).to.have.rendered(ReactComponent|JSX);
expectReactShallow(ReactComponent|JSX).to.have.rendered.with.all.children(ReactComponent|JSX);
expectReactShallow(ReactComponent|JSX).to.have.exactly.rendered(ReactComponent|JSX);
expectReactShallow(ReactComponent|JSX).to.contain(ReactComponent|JSX);
expectReactShallow(ReactComponent|JSX).to.contain.exactly(ReactComponent|JSX);
expectReactShallow(ReactComponent|JSX).to.contain.with.all.children(ReactComponent|JSX);
expectReactShallow(ReactComponent|JSX).to.not.contain(ReactComponent|JSX);
expectReactShallow(ReactComponent|JSX).to.not.contain.exactly(ReactComponent|JSX);
expectReactShallow(ReactComponent|JSX).to.not.contain.with.all.children(ReactComponent|JSX);

See details in unexpected-react docs.