react.md

Testing React components

Translations: Español, Français

Setting up Babel

The first step is setting up Babel to transpile JSX code from the tests by adding an AVA section to your package.json:

{
  "ava": {
    "require": ["babel-register"],
    "babel": "inherit"
  },
  "babel": {
    "presets": ["react"]
  }
}

You can find more information about setting up Babel with AVA in the babelrc recipe.

Using Enzyme

Let's first see how to use AVA with one of the most popular React testing libraries: Enzyme.

If you intend to only use shallow component rendering, you don't need any extra setup.

First install Enzyme required packages:

$ npm install --save-dev enzyme react-addons-test-utils react-dom

Then you can use Enzyme straight away:

import test from 'ava';
import React from 'react';
import {shallow} from 'enzyme';

const Foo = ({children}) =>
	<div className="Foo">
		<span className="bar">bar</span>
		{children}
		<span className="bar">bar</span>
	</div>;

Foo.propTypes = {
	children: React.PropTypes.any
};

test('has a .Foo class name', t => {
	const wrapper = shallow(<Foo/>);
	t.true(wrapper.hasClass('Foo'));
});

test('renders two `.Bar`', t => {
	const wrapper = shallow(<Foo/>);
	t.is(wrapper.find('.bar').length, 2);
});

test('renders children when passed in', t => {
	const wrapper = shallow(
		<Foo>
			<div className="unique"/>
		</Foo>
	);
	t.true(wrapper.contains(<div className="unique"/>));
});

Enzyme also has a mount and render helper to test in an actual browser environment. If you want to use these helpers, you will have to setup a browser environment. Check out the browser testing recipe on how to do so.

To see an example of AVA working together with Enzyme set up for browser testing, have a look at this sample project.

This is a basic example on how to integrate Enzyme with AVA. For more information about using Enzyme for unit testing React component, have a look at Enzyme's documentation.

Using JSX helpers

Another approach to testing React component is to use the react-element-to-jsx-string package to compare DOM trees as strings. jsx-test-helpers is a nice library handling shallow component rendering and converting JSX to string in order to test React components using AVA assertions.

$ npm install --save-dev jsx-test-helpers

Usage example:

import test from 'ava';
import React from 'react';
import {renderJSX, JSX} from 'jsx-test-helpers';

const Foo = ({children}) =>
	<div className="Foo">
		<span className="bar">bar</span>
		{children}
		<span className="bar">bar</span>
	</div>;

Foo.propTypes = {
	children: React.PropTypes.any
};

test('renders correct markup', t => {
	const actual = renderJSX(<Foo/>);
	const expected = JSX(
		<div className="Foo">
			<span className="bar">bar</span>
			<span className="bar">bar</span>
		</div>
	);
	t.is(actual, expected);
});

test('renders children when passed in', t => {
	const actual = renderJSX(
		<Foo>
			<div className="unique"/>
		</Foo>
	);
	const expected = JSX(
		<div className="Foo">
			<span className="bar">bar</span>
			<div className="unique"/>
			<span className="bar">bar</span>
		</div>
	);
	t.is(actual, expected);
});

Note that you have to use variables like actual and expected because power-assert doesn't handle JSX correctly.

This is a basic example on how to use jsx-test-helpers with AVA. To see a more advanced usage of this library, have a look at this annotated test file.

This sample project shows a basic and minimal setup of AVA with jsx-test-helpers.

Using other assertion libraries

In AVA, you can use any assertion library, and there are already a few out there to test React components. Here is a list of assertion libraries working well with AVA:

• expect-jsx (Example)
• unexpected-react (Sample project with an output example)

Reference

• In depth guide of setting up AVA with code coverage on a React project