При написании модульных тестов для React может оказаться полезным мелкий рендеринг. Неглубокий рендеринг позволяет визуализировать компонент «на один уровень глубины» и утверждать факты о том, что возвращает его метод рендеринга, не беспокоясь о поведении дочерних компонентов, которые не создаются или не отображаются. Это не требует DOM.

Import

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

Например, если у вас есть следующий компонент:

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

В настоящее время мелкое тестирование имеет некоторые ограничения, а именно не поддерживает ссылки.

Заметка:

Мы также рекомендуем проверить API-интерфейс Enzyme Shallow Rendering . Он обеспечивает более удобный API более высокого уровня по тем же функциям.

Reference

shallowRenderer.render()

Вы можете подумать о мелком рендерере как о «месте» для визуализации компонента, который вы тестируете, и из которого вы можете извлечь выход компонента.

shallowRenderer.render() аналогичен, ReactDOM.render() но он не требует DOM и лишь делает один уровень глубиной. Это означает, что вы можете тестировать компоненты, изолированные от того, как их дети реализованы.

shallowRenderer.getRenderOutput()

После shallowRenderer.render() вызова вы можете использовать shallowRenderer.getRenderOutput() для получения мелко визуализированного вывода.