CodePark/ questions / Strategy & test types
START PRACTICINGPRACTICE
Frontend question · Testing › Strategy & test types

Why did the React community move from Enzyme-style shallow rendering to React Testing Library?

The community moved because Enzyme's shallow tests checked how a component is built, not what the user sees.

Shallow rendering in Enzyme renders one component without rendering its children. Its API also lets you read component state, the props of child components and instance methods. This caused two problems:

  • Refactoring a class to hooks, or splitting a component, breaks the tests even when the behaviour did not change.
  • A shallow test can pass while the real component tree is broken.

React Testing Library (RTL) works differently:

  • It renders the full tree into a real DOM. In tests this DOM comes from jsdom, a DOM written in JavaScript that runs in Node.
  • It only gives you DOM queries, mainly by role, label and text.
  • You interact through events, like a user.

So RTL tests survive refactors, and they catch integration bugs between parent and child. Also, Enzyme never got an official adapter for React 18. This pushed teams to switch.

  • Shallow rendering skips child components and exposes internals like state and instances.
  • Shallow tests break on refactors and can pass while the real UI is broken.
  • RTL renders the full component tree into the DOM.
  • RTL queries match how users and assistive technology find elements.
  • Enzyme has no official adapter for React 18.