4.8 Поверхностный отрисовщик

Импорт:


Код
    
  import ShallowRenderer from 'react-test-renderer/shallow'; // ES6
  var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 c npm
  


4.8.1 Обзор

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

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


Код
    
  function CustomComponent() {
    return (
      <p>
        <h3 className="head">Заглавие</h3>
        <Alert text="Внимание! Важное сообщение!" />
      </p>
    );
  }
  

То вы можете утверждать:


Код
    
  import ShallowRenderer from 'react-test-renderer/shallow';

  // в вашем тесте:
  const renderer = new ShallowRenderer();
  renderer.render();
  const result = renderer.getRenderOutput();

  expect(result.type).toBe('p');
  expect(result.props.children).toEqual([
    <h3 className="head">Заглавие</h3>
    <Alert text="Внимание! Важное сообщение!" />
  ]);
  

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


Замечание.

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


4.8.2 Справка


shallowRenderer.render()

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

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


shallowRenderer.getRenderOutput()

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

Затем вы можете начать утверждать факты о выводе.