Shallow Renderer

Cara Import

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

Ikhtisar

Ketika menulis unit tests untuk React, shallow rendering akan sangat membantu Anda. Shallow rendering memungkinkan Anda untuk melakukan render suatu komponen “sedalam satu level” dan melakukan pengujian dari hasil kembalian render method komponen tersebut. Hasil render method tidak akan memedulikan sifat (behavior) dari komponen-komponen yang ada di dalamnya, karena komponen-komponen tersebut tidak ter-render. Proses ini tidak memerlukan DOM.

Sebagai contoh, jika Anda memiliki komponen seperti berikut:

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

Kemudian Anda dapat melakukan pengujian:

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

// pada pengujian Anda:
const renderer = new ShallowRenderer();
renderer.render(<MyComponent />);
const result = renderer.getRenderOutput();

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

Saat ini shallow testing masih memiliki beberapa keterbatasan, salah satunya belum mendukung refs.

Catatan:

Kami juga menyarankan Anda untuk membaca API Shallow Rendering oleh Enzyme yang menyediakan API tingkat atas (higher-level API) yang lebih baik untuk fungsionalitas serupa.

Referensi

shallowRenderer.render()

Anda dapat membayangkan shallowRenderer sebagai “tempat” untuk me-render suatu komponen yang sedang Anda uji, juga sebagai tempat di mana Anda bisa mengekstrak keluaran dari komponen tersebut.

shallowRenderer.render() merupakan method yang serupa dengan ReactDOM.render() tetapi tidak membutuhkan DOM dan hanya melakukan render sedalam satu level. Hal tersebut membuat Anda dapat menguji suatu komponen secara terisolasi, tidak menghiraukan implementasi komponen lain yang ada di dalamnya.

shallowRenderer.getRenderOutput()

Setelah memanggil method shallowRenderer.render() , Anda dapat menggunakan shallowRenderer.getRenderOutput() untuk memperoleh keluaran dari komponen yang di-render menggunakan shallow renderer.

Kemudian, Anda dapat mulai melakukan pengujian dari hasil keluaran yang telah diperoleh.