Shallow Rendering
//source code
function MyComponent() {
return (
<div>
<span className="heading">Title</span>
<Subcomponent foo="bar" />
</div>
);
}
//tests
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" />
]);
Сan be helpful when writing unit tests for React.
Lets you render a component “one level deep” and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered.
shallowRenderer.render()
ShallowRenderer.render() is similar to ReactDOM.render() but it doesn’t require DOM and only renders a single level deep, this means you can test components isolated from how their children are implemented.