Dayaz Render Etmə

İdxal Etmək

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

İcmal

React-də unit testlər yazmaq üçün Dayaz Render Etmə faydalıdır. Dayaz render etmə, komponenti “bir dərəcə dərinlikdə” render etməyə imkan yaradır. Bu halda, uşaq komponentlərin davranışından narahat olmayaraq (yaranıb render etmirlər), siz komponentin nə qaytardığı haqqında iddaları yoxlaya bilərsiniz. Burada DOM-a tələbat yoxdur.

Məsələn, əgər sizdə aşağıdakı komponent varsa:

function MyComponent() {
  return (
    <div>
      <span className="heading">Başlıq</span>
      <Subcomponent foo="bar" />
    </div>
  );
}

Siz iddiaları aşağıdakı formada edə bilərsiniz:

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">Başlıq</span>,
  <Subcomponent foo="bar" />
]);

Dayaz render etmənin bəzi məhdudiyyətləri var. Hal-hazırda ref-lər dəstəklənmir.

Qeyd:

Biz həmçinin Enzyme-ın Dayaz Render Etmə API-na baxmağınızı tövsiyə edirik. Bu sizə eyni funksionallıq üzərindən yuxarı dərəcəli API təmin edir.

Arayış

shallowRenderer.render()

Siz shallowRenderer-ə komponenti render etmək üçün və komponentin nəticəsini idxal etmək üçün bir “yer” kimi baxa bilərsiniz.

shallowRenderer.render() root.render()-ə bənzəyir amma DOM tələb etmir və komponentləri yalnız bir dərəcə dərinliyə kimi render edir. Bu metod, sizə komponentləri uşaqların tətbiqindən təcrid olunmuş şəkildə test etməyə imkan yaradır.

shallowRenderer.getRenderOutput()

shallowRenderer.render() çağrıldıqdan sonra shallowRenderer.getRenderOutput()-dan istifadə edərək dayaz render etmənin nəticəsini əldə edə bilərsiniz.

Nəticəni əldə etdikdən sonra nəticə haqqında iddiaları yoxlaya bilərsiniz.