Seite 5: Unit Testing und Tools

Inhaltsverzeichnis

Unit Testing

Das Testen von React-Komponenten ist vergleichsweise einfach und eine hohe Testabdeckung deshalb kein Problem. Zum einen lassen sich durch die sogenannten props der Zustand der Komponenten wiederherstellen (kein großer Mock-Aufwand) und zum anderen bestehen keine Abhängigkeiten zu einem realen DOM.

Das React-Add-on TestUtils hilft dabei, auf Child-Komponenten (bspw. findRenderedComponentsWithType) und DOM-Elemente (bspw. findRenderedDOMComponentWithClass) zuzugreifen. In folgendem Testszenario ist zu überprüfen, ob die TweetList bei Angabe von zwei Tweets die korrekte Anzahl von Tweet-Komponenten rendert.

// TweetListSpec.js

import TweetList from '../../../components/TweetList.js';
import Tweet from '../../../components/Tweet.js';

const TestUtils = React.addons.TestUtils;
const tweets = [
    { text: 'Hello World!', userId: 1 },
    { text: 'My first tweet!', userId: 2 }
];

describe('Tweetlist', function () {
    let tweetList;

    beforeEach(function () {
        tweetList = TestUtils.renderIntoDocument(<TweetList tweets=
        {tweets} />);
    });

    it('should render some tweets', function () {
        const tweets = 
        TestUtils.scryRenderedComponentsWithType(tweetList, Tweet);

        expect(tweets).to.have.length(2);
    });
    ...
});

Der folgende Test zeigt den Zugriff auf ein DOM-Element mit der Klasse tweet-text. Der Text innerhalb dieses Elements soll "My first tweet" sein:

// TweetSpec.js
describe('Tweet', function () {
    it('should render the text', function () {
        const tweet = TestUtils.renderIntoDocument(
            <Tweet text="My first tweet" />
        );
        const tweetText =
        TestUtils.findRenderedDOMComponentWithClass(tweet, 'tweet-text');
        const tweetTextNode = React.findDOMNode(tweet);
        const expectedText = "My first tweet";

        expect(tweetText).to.be.ok;
        expect(tweetTextNode.textContent).to.equal(expectedText);
    });
});

Die TestUtils können außerdem Events wie einen Klick simulieren:

it('should do something on click', function() {
    const tweet = TestUtils.renderIntoDocument(
        <Tweet text="My first tweet" />
    );
    const button = TestUtils.findRenderedDOMComponentWithTag(tweet,
    'button');

    TestUtils.Simulate.click(button);

    expect(tweet)...
});

Eine genaue Erklärung aller Möglichkeiten sind in der TestUtils-Dokumentation und in weiteren Tutorials zum Thema Testen zu finden.

React Developer Tools

Mit den React Developer Tools lassen sich Komponenten ähnlich wie in den Developer Tools der unterschiedlichen Browser untersuchen. Jedoch handelt es sich dabei nicht um HTML- sondern um React-Komponenten inklusive ihrer props und ihres state. Vor allem die Option, beides direkt im Browser verändern zu können, macht das sonst so zeitaufwendige Debuggen angenehmer.

Entwickler können die React Developer Tools als Chrome- und Firefox-Erweiterung installieren, eine Standalone-App ist in Arbeit
(Stand September 2015).

Als weiteres nützliches Tool für die React-Entwicklung ist React Hot Loader zu nennen. Änderungen am Code der Komponenten werden direkt in den Browser übertragen. Das Webpack-Plug-in funktioniert natürlich auch mit dem im Artikel beschriebenen Fluxible. Um es auszuprobieren, ist das Projekt mit npm run dev zu starten und die Seite mit http://localhost:3000 im Browser aufzurufen. Passt man im Anschluss eine beliebige Komponente an, lassen sich die Änderungen live im Browser betrachten.