Snapshot tests in React are a way to test your UI by keeping a copy of what your UI component looks like at a certain point in time.

These tests help you make sure your UI doesn't change unexpectedly.

When you run a snapshot test, it captures the rendered output of a component and saves it as a snapshot file.

Later, when you change your code and rerun the tests, it compares the new UI output with the stored snapshot.

Here's a simple example: You have a React component called MyButton. It returns a button with the text Click me!.

When you first write the snapshot test, a snapshot of this button UI will be saved.

import React from 'react';
import renderer from 'react-test-renderer';
import MyButton from './MyButton';


test('MyButton renders correctly', () => {
  const tree = renderer.create(<MyButton />).toJSON();
  expect(tree).toMatchSnapshot();
});

Now, if you or anyone else changes the button's text to Press me!, the next test run will fail if you do not update the snapshot.

This failure prompts you to review if the UI change was intentional.

It is Used for:

• UI Libraries: When working with UI component libraries like Material-UI, snapshot tests ensure components render as expected across updates.
• Design Consistency: Ensures your design stays consistent over time, especially helpful in big teams where many people contribute.
• Detecting Accidental Changes: If a team's refactoring unintentionally alters the UI, snapshots can catch these changes early.
• Legacy Code: Useful in maintaining projects where understanding the whole codebase is hard. Snapshot tests offer a safety net by letting you know if the UI changes.