Shallow Renderer

Importing

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

Επισκόπηση

Όταν γράφετε unit tests για το React, το shallow rendering μπορεί να είναι ιδιαίτερα χρήσιμο. To Shallow rendering σας επιτρέπει να κάνετε render ένα component “σε βάθος ενός επιπέδου” και να κάνετε assert γεγονότα όπως το τι επιστρέφει στο render ένα method, χωρίς να ανασυχείτε για την συμπεριφορά των child components της μεθόδου, τα οποία δεν αποδίδονται ή αναφέρονται. Αυτό δεν απαιτεί ένα DOM.

Για παράδειγμα, αν έχετε το ακόλουθο component:

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

Τότε μπορείτε να κάνετε assert:

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

// in your 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">Title</span>,
  <Subcomponent foo="bar" />
]);

Τo shallow testing έχει κάποιους περιορισμούς για την ώρα, και συγκεκριμένα δεν υποστηρίζει τα refs.

Σημείωση:

Επίσης προτείνουμε να ρίξετε μια ματία Shallow Rendering API του Enzyme. Παρέχει ένα καλύτερο higher-level API πάνω στην ίδια λειτουργικότητα.

Αναφορά

shallowRenderer.render()

Μπορείτε να σκεφτείτε το shallowRenderer σαν ένα “σημείο” όπου κάνετε render το component που δοκιμάζετε, και από το οποίο μπορείτε να εξάγετε το αποτέλεσμα του component.

Το shallowRenderer.render() είναι παρόμοιο με το ReactDOM.render() αλλά δεν απαιτεί το DOM και κάνει render μόνο σε βάθος ενός επιπέδου. Αυτό σημαίνει ότι μπορείτε να δοκιμάσετε components απομονωμένα από το πως έχουν εφαρμοστεί τα childen τους.

shallowRenderer.getRenderOutput()

Μετά την κλήση του shallowRenderer.render(), μπορείτε να χρησιμοποιήσετε το shallowRenderer.getRenderOutput() για να έχετε πρόσβαση στο shallowly rendered αποτέλεσμα.

Μπορείτε έπειτα να ξεκινήσετε να κάνετε assert γεγονότα σχετικά με το αποτέλεσμα.