---

Nota del traduttore

Questa è la traduzione del file react.md. Qui c'è il link dove si confrontano le differenze tra commit di riferimento di questa traduzione e l'ultimo commit di AVA sul branch master (Se si clicca sul link, e non si vede il file react.md nella lista dei file modificati, questa traduzione è aggiornata).

---

Testare componenti React

Translations: Español, Français, Italiano

Configurare Babel

Il primo passo per configurare Babel per transpilare codice JSX nei test aggiungendo una sezione AVA al tuo package.json:

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

Puoi trovare maggiori informazioni su come configurare Babel con AVA nella ricetta babelrc.

Usare Enzyme

Vediamo come utilizzare AVA con uno delle librerie di testing React più popolari: Enzyme. Se intendi utilizzare solamente il rendering superficiale dei componenti, allora non hai bisogno di seguire questa configurazione aggiuntiva.

Per prima cosa installa i pacchetti Enzyme necessari:

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

Puoi quindi usare Enzyme da subito:

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 ha anche degli helper mount e render per fare testing in un ambiente browser reale. Se vuoi utilizzare questi helpers avrai bisogno di configurare un ambiente di testing per AVA. Fai riferimento alla ricetta browser testing su come fare.

Per vedere un esempio di AVA e Enzyme configurati in un ambiente browser di testing, guarda questo progetto di esempio.

Questo è un esempio base su come integrare Enzyme e AVA. Per maggiori informazioni su come usare Enzyme per il testing di componenti React fai riferimento alla documentazione di Enzyme.

Usare helpers per JSX

Un altro approccio per il testing di componenti React è l'uso del pacchetto react-element-to-jsx-string per comparare alberi DOM tra loro come stringhe. La libreria jsx-test-helpers è molto utile per il rendering superficiale dei componenti e per la conversione del codice JSX in stringhe di testo per usare le asserzioni AVA nel testing di componenti React.

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

Esempio di utilizzo:

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);
});

Devi usare le variabili actual e expected come mostrato sopra a causa di un problema con power-assert e la gestione di JSX.

questo è un esempio base su come utilizzare jsx-test-helpers con AVA. Per esempi più avanzati con questa libreria guarda questo file di test con note.

Questo semplice progetto mostra una configurazione minimale tra AVA e jsx-test-helpers.

Utilizzare altre librerie di asserzione

In AVA puoi utilizzare ogni libreria di asserzione che vuoi e ci sono già alcune pronte per il testing di componenti React. Questa è una lista di librerie che funzionano bene con AVA:

• expect-jsx (Esempio)
• unexpected-react (Semplice progetto con un esempio di output)