react.md

Testowanie składników React

Tłumaczenia: Español, Français

Konfigurowanie Babel

Gdy włączysz Babel, AVA automatycznie przedłuży twoją regularną konfigurację Babel (na poziomie projektu). Powinieneś móc używać React w plikach testowych bez dodatkowej konfiguracji.

Jeśli jednak chcesz to ustawić jawnie, dodaj ustawienie wstępne do opcji testowych w potoku Babel AVA, modyfikując package.json lub plik ava.config.*.

package.json:

{
	"ava": {
		"babel": {
			"testOptions": {
				"presets": ["@babel/preset-react"]
			}
		}
	}
}

Możesz znaleźć więcej informacji w @ava/babel.

Używanie Enzyme

Zobaczmy najpierw, jak używać AVA z jedną z najpopularniejszych bibliotek testowych React: Enzyme.

Jeśli zamierzasz używać tylko płytkiego renderowania komponentów, nie potrzebujesz żadnej dodatkowej konfiguracji.

Najpierw zainstaluj wymagane pakiety Enzyme:

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

Następnie możesz od razu użyć Enzyme:

const test = require('ava');
const React = require('react');
const {shallow} = require('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 także ma mount i render helper testować w rzeczywistym środowisku przeglądarki. Jeśli chcesz skorzystać z tych pomocników, musisz skonfigurować środowisko przeglądarki. Sprawdź formuła na testowanie w przeglądarce jak to zrobić.

Aby zobaczyć przykład współpracy AVA z Enzyme skonfigurowanym do testowania w przeglądarce, spójrz na ten przykładowy projekt.

Jest to podstawowy przykład integracji enzymu z AVA. Aby uzyskać więcej informacji na temat używania Enzymu do testowania jednostkowego składnika React, zajrzyj do dokumentacji Enzyme.

Używanie JSX helpers

Innym podejściem do testowania komponentu React jest użycie pakietu react-element-to-jsx-string aby porównać drzewa DOM jako ciągi znaków. jsx-test-helpers to niezła obsługa biblioteki renderowania płytkich komponentów i konwertowania JSX na łańcuch w celu przetestowania komponentów React przy użyciu asercji AVA.

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

Przykład użycia:

const test = require('ava');
const React = require('react');
const {renderJSX, JSX} = require('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);
});

Zauważ, że musisz użyć zmiennych takich jak actual i expected ponieważ power-assert nie obsługuje poprawnie JSX.

To jest podstawowy przykład użycia jsx-test-helpers z AVA. Aby zobaczyć bardziej zaawansowane wykorzystanie tej biblioteki, spójrz na ten testowy plik z adnotacjami.

Ten przykładowy projekt pokazuje podstawową i minimalną konfigurację AVA z jsx-test-helpers.

Korzystanie z innych bibliotek asercji

W AVA możesz użyć dowolnej biblioteki asercji, a jest już kilka takich, które testują komponenty React. Oto lista bibliotek asercji dobrze współpracujących z AVA:

• expect-jsx (Przykład)
• unexpected-react (Przykładowy projekt z przykładem wyjścia)