Renderizzatore Shallow

Nota sulla traduzione:

La definizione inglese Shallow Renderer si traduce letteralmente in Renderizzatore Superficiale, dato che il modulo è chiamato shallow, abbiamo deciso di non tradurlo di seguito.

Importazione

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

Panoramica

Quando scriviamo unit test per React, la renderizzazione shallow può tornare molto utile. Essa permette di renderizzare un componente “ad un livello di profondità” e di asserire fatti riguardo cosa viene ritornato dal suo metodo render. Il vantaggio risiede nel fatto che non dobbiamo preoccuparci del comportamento dei componenti figli, i quali non vengono istanziati o renderizzati. Non è richiesto nemmeno un DOM.

Ad esempio, dato il seguente componente:

function MioComponente() {
  return (
    <div>
      <span className="testata">Titolo</span>
      <SottoComponente foo="bar" />
    </div>
  );
}

Possiamo asserire:

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

// nel tuo test:
const renderer = new ShallowRenderer();
renderer.render(<MioComponente />);
const result = renderer.getRenderOutput();

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

Il testing shallow, attualmente, ha alcune limitazioni quali il mancato supporto ai refs.

Nota:

Ti raccomandiamo inoltre di dare uno sguardo alle API Shallow Rendering di Enzyme. Ti offrono una migliore API di più alto livello attorno alla stessa funzionalità.

Riferimento

shallowRenderer.render()

Puoi pensare allo shallowRenderer come ad un “posto” nel quale renderizzare i componenti che stai testando, dal quale puoi estrarre l’output del componente.

shallowRenderer.render() è simile a ReactDOM.render() ma non richiede un DOM e renderizza ad un solo livello di profondità. Ciò significa che potrai testare i componenti in isolamento rispetto a come sono implementati i componenti figli.

shallowRenderer.getRenderOutput()

Quando shallowRenderer.render() è stato chiamato, puoi usare shallowRenderer.getRenderOutput() per ottenere l’output renderizzato in modo “superficiale”.

Potrai allora asserire fatti riguardo ad esso nei tuoi test.