מרנדר רדוד

ייבוא

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

סקירה כללית

בעת כתיבת בדיקות יחידה עבור React, מרנדר רדוד יכול לעזור. מרנדר רדוד נותן לך לרנדר קומפוננטה “רמת עומק אחת”, ולוודא על מה המתודה רנדר מחזירה, מבלי לדאוג על התנהגותם של קומפוננטות הילדים שלה, אשר לא מייצרים מופע חדש או מתרנדרים. זה לא דורש DOM.

לדוגמה, אם יש לך את הקומפוננטה הבאה:

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

אז אתה יכול לוודא:

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

// בבדיקה שלך:
const renderer = new ShallowRenderer();
renderer.render(<MyComponent />);
const result = renderer.getRenderOutput();

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

למרנדר רדוד כרגע יש כמה מגבלות, למשל חוסר תמיכה ב-refs.

הערה:

אנחנו גם ממליצים לבדוק את ה-API של המרנדר הרדוד של Enzyme. הוא מספק API מרמה-גבוהה יותר על אותה פונקציונליות.

עיון

shallowRenderer.render()

אתה יכול לחשוב על shallowRenderer כ-“מקום” לרנדור קומפוננטה שאתה בודק, וממנו ניתן להוציא את הפלט של הקומפוננטה.

shallowRenderer.render() דומה ל-()ReactDOM.render אבל לא דורש DOM ומרנדר רק רמת עומק אחת. זה אומר שאתה יכול לבדוק קומפוננטות מבודדות מבלי לדעת איך הילדים שלהם ממומשים.

shallowRenderer.getRenderOutput()

אחרי ש-shallowRenderer.render() נקרא, אתה יכול להשתמש ב-shallowRenderer.getRenderOutput() כדי לקבל את הפלט הרדוד שרונדר.

אחרי זה אתה יכול להתחיל לתשאל עובדות על הפלט.