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.

shallowRenderer.getRenderOutput()

After shallowRenderer.render() has been called, you can use shallowRenderer.getRenderOutput() to get the shallowly rendered output, you can then begin to assert facts about the output.

Shallow Rendering — Structure map

Clickable & Draggable!

Shallow Rendering — Related pages: