Introduction

• Shallow render (or shallow DOM) means rendering only the component itself without rendering its children.
  • Isolation – Can test a component without worrying about its children.
  • Faster Tests – Less rendering → tests run faster.
  • Focused Assertions – Only assert what your component itself outputs.
• Useful in unit test.

Example:

function Button({ label }) {
  return <button>{label}</button>;
}

function Toolbar() {
  return (
    <div>
      <Button label="Save" />
      <Button label="Cancel" />
    </div>
  );
}

Normal render of <Toolbar />

<div>
  <button>Save</button>
  <button>Cancel</button>
</div>

Shallow render of <Toolbar />

• Does not render <Button /> components’ internals
• Just put the surface

<div>
  <Button label="Save" />
  <Button label="Cancel" />
</div>

How to Shallow Render

Enzyme (a testing lib for React)

npm install enzyme enzyme-adapter-react-16

Example: