What is Jest snapshot testing and how do I use it?

What is Jest snapshot testing and how do I use it?

Jest snapshot testing is a feature that allows you to test the output of your components by saving a 'snapshot' of the rendered output. When you run your tests, Jest compares the current output to the saved snapshot and alerts you if there are any differences.

How do I create a snapshot in Jest?

To create a snapshot, you can use the toMatchSnapshot() method in your test. For example:

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

What happens if the snapshot changes?

If the snapshot changes, Jest will fail the test and show you the differences. You can then decide whether to update the snapshot by running jest -u if the changes are intentional.

Can I use Jest snapshots for non-React components?

Yes, Jest snapshots can be used for any serializable output, not just React components. You can snapshot any JavaScript object or function output.