Yüzeysel Render Edici

İçe aktarım

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

Genel Bakış

React için birim testleri yazarken, yüzeysel render edici yardımcı olabilir. Yüzeysel render etme; bir bileşeni, somutlaştırılmayan veya render edilmeyen alt bileşenlerinin davranışları hakkında endişelenmeden, “bir seviye alta” render etmenize ve render etme metodunun ne döndüğü ile ilgili gerçekleri teyit etmenize olanak sağlar. Bu bir DOM gerektirmez.

Örneğin, aşağıdaki gibi bir bileşeniniz varsa:

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

O zaman şu şekilde kullanabilirsiniz:

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

// Testinizde:
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" />
]);

Yüzeysel test etmenin şu anda bazı kısıtlamaları var, mesela ref’leri desteklemiyor.

Not:

Ayrıca Enzyme’in Yüzeysel Render Etme API’sine de göz atmanızı öneririz. Aynı işlevsellik üzerinden daha iyi ve üst düzey bir API sağlar.

Referans

shallowRenderer.render()

shallowRenderer’ı, test ettiğiniz bileşeni render edeceğiniz ve bu bileşenin çıktısını alabileceğiniz bir “yer” olarak düşünebilirsiniz.

shallowRenderer.render(), root.render()‘a benzer, ancak DOM gerektirmez ve yalnızca bir seviye alta render eder. Bu, alt öğelerinin nasıl uygulandığından bağımsız şekilde bileşenleri test edebileceğiniz anlamına gelir.

shallowRenderer.getRenderOutput()

shallowRenderer.render() çağrıldıktan sonra, yüzeysel render edilen çıktıyı almak için shallowRenderer.getRenderOutput() kullanabilirsiniz.

Sonrasında çıktı hakkında gerçekleri teyit etmeye başlayabilirsiniz.