Shallow Renderer

Импорт хийх

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

Тойм

Unit тест бичихэд өнгөц рендэр (shallow render) тус болдог. Өнгөц рендэр хийнэ гэдэг нь “нэг түвшин доогуур” компонентыг рендэр хийж, рендэр метод юу буцаасан тухай мэдээллийг баталгаажуулахыг хэлнэ. Энэ нь Instance үүсээгүй, рендэр хийгдээгүй хүү компонентын үйлдлээс үл хамаарна. DOM шаардахгүй.

Жишээ нь хэрэв танд доорх компонет байгаа бол:

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

Ингэж баталгаажуулна:

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

Refs дэмждэггүй гэхчлэн зарим нэг сул тал өнгөц тест хийх функцэд бий.

Тэмдэглэл:

Enzyme-ийн Өнгөц рендэрийн API-ыг уншихыг зөвлөе. Ажиллагаа нь ижил боловч илүү ахисан түвшний, сайн API санал болгодог.

Reference

shallowRenderer.render()

shallowRenderer-ыг та тест хийж буй компонентоо рендэр хийх “газар” гээд ойлгочиход болно. Түүнээсээ компонентын үр дүнг харах юм.

shallowRenderer.render() нь root.render()-тай төстэй. Гэхдээ DOM шаардахгүй, нэг түвшин доогуур рендэр хийдэг гэдгээрэЭ ялгаатай. Энэ нь юу гэсэн үг вэ гэхээр та хүү компонентуудын ажиллагаанаас ангид компонентуудыг тест хийж болно гэсэн үг юм.

shallowRenderer.getRenderOutput()

shallowRenderer.render()-ыг дуудсаны дараа та өнгөц рендэр хийсэн үр дүнгээ харахдаа shallowRenderer.getRenderOutput()-ыг ашиглана.

Тэгээд та үр дүнг нь assert хийн баталгаажуулж болно.