Shallow Renderer

Import

import ShallowRenderer from 'react-test-renderer/shallow'; // ES6
var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 mit npm

Übersicht

Beim Schreiben von unit tests kann flaches Rendering (engl. shallow rendering) hilfreich sein. Flaches Rendering ermöglicht es, eine Komponente “einen Level tief” zu rendern, und vergleicht den zurückgegebenen Wert der Render Methode, ohne sich über das Verhalten der Kind-Komponenten, welche nicht instanziiert oder gerendert werden, Sorgen zu machen. Ein DOM wird hierbei nicht verlangt.

Wenn du zum Beispiel folgende Komponente hast:

function MyComponent() {
  return (
    <div>
      <span className="heading">Titel</span>
      <Subcomponent foo="bar" />
    </div>
  );
}

So können wir sie testen:

import ShallowRenderer from 'react-test-renderer/shallow';

// in deinem Test:
const renderer = new ShallowRenderer();
renderer.render(<MyComponent />);
const result = renderer.getRenderOutput();

expect(result.type).toBe('div');
expect(result.props.children).toEqual([
  <span className="heading">Titel</span>,
  <Subcomponent foo="bar" />
]);

Flaches Rendering hat derzeit die Einschränkung, dass refs nicht unterstützt werden.

Hinweis:

Wir empfehlen auch, sich die Shallow Rendering API von Enzyme anzusehen. Sie stellt eine angenehmere übergeordnete API mit den gleichen Funktionalitäten bereit.

Referenz

shallowRenderer.render()

Du kannst dir den shallowRenderer als den “Ort” vorstellen an dem die zu testende Komponente gerendert wird, und du daraus die Ausgabe der Komponente entnehmen kannst.

shallowRenderer.render() ist ähnlich wie root.render(), nur dass es kein DOM benötigt und nur einen Level tief rendert. Das bedeutet, dass du Komponenten abgegrenzt testen kannst, unabhängig davon wie die Kind-Komponenten implementiert sind.

shallowRenderer.getRenderOutput()

Nachdem shallowRenderer.render() aufgerufen wurde, kannst du dir mit shallowRenderer.getRenderOutput() die flach gerenderte Ausgabe zurückgeben lassen.

Dann kann man anfangen, die Ausgabe zu testen.