What are some examples of Jest snapshots?

Can you explain what Jest snapshots are?

Jest snapshots are a feature in the Jest testing framework that allows you to capture the rendered output of a component and save it as a reference. This helps in ensuring that the UI does not change unexpectedly.

How do I create a snapshot in Jest?

To create a snapshot, you can use the toMatchSnapshot() method in your test. For example, expect(component).toMatchSnapshot(); will create a snapshot of the rendered component.

Can you show me an example of a Jest snapshot test?

Sure! Here's a simple example:

import React from 'react';
import { render } from '@testing-library/react';
import MyComponent from './MyComponent';

test('renders correctly', () => {
  const { container } = render(<MyComponent />);
  expect(container).toMatchSnapshot();
});

What happens if the snapshot changes?

If the snapshot changes, Jest will alert you during the test run. You can then review the changes and decide whether to update the snapshot or investigate the differences.