React › Testing

What is snapshot testing in React, and what are its benefits and drawbacks?

Intermediate

Answer

Snapshot testing saves a recorded version of a component's rendered output the first time a test runs, and future test runs compare the current output against that saved snapshot, flagging any unexpected difference. It quickly catches accidental changes, but can become noisy if snapshots are updated carelessly without actually reviewing what changed.

import renderer from 'react-test-renderer';

test('button renders correctly', () => {
  const tree = renderer.create(<Button label="Click Me" />).toJSON();
  expect(tree).toMatchSnapshot();
});

Real-world example A team catches an accidental styling change to their shared Button component through a failing snapshot test, prompting them to carefully review whether the change was intentional before approving the updated snapshot.

Common follow-ups: Why can snapshot tests sometimes give a false sense of security if updated too casually?;When is snapshot testing a genuinely good fit compared to more specific assertions?

Design Patterns in React;React DevTools & Debugging