4.8 Поверхностный отрисовщик
Импорт:
import ShallowRenderer from 'react-test-renderer/shallow'; // ES6
var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 c npm
При написании модульных тестов для 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 с той же функциональностью.
shallowRenderer.render()
Вы можете подумать о shallowRenderer
как о «месте» для отрисовки компонента, который вы
тестируете, и из которого вы можете извлечь результат вывода этого компонента.
shallowRenderer.render()
похож на ReactDOM.render()
, но он не требует DOM и
отрисовывает только один уровень глубины. Это означает, что вы можете тестировать
компоненты, независимо от того, каким образом реализованы их потомки.
shallowRenderer.getRenderOutput()
После вызова функции shallowRenderer.render()
вы можете использовать
shallowRenderer.getRenderOutput()
, чтобы получить неглубоко отрисованный вывод.
Затем вы можете начать утверждать факты о выводе.