How Snapshot testing works and what does toMatchSnapshot( ) function do in Jest Snapshot testing for React components?

I think this question has not been answered with enough details!
Snapshot testing is based on history of your previous tests. When you first run a snapshot test it creates a text file including the textual render of your component tree. For example the following test:

import React from 'react';
import renderer from 'react-test-renderer';

it('renders correctly', () => {
  const tree = renderer
    .create(<Link page="http://www.facebook.com">Facebook</Link>)
    .toJSON();
  expect(tree).toMatchSnapshot();
});

Will generate the following text file:

exports[`renders correctly 1`] = `
<a
  className="normal"
  href="http://www.facebook.com"
  onMouseEnter={[Function]}
  onMouseLeave={[Function]}
>
  Facebook
</a>
`;

You need to keep these snapshot files in your VCS (git). When you make a change you can run these tests to see if it yet matches the snapshot text file or not.

for more reading study this document: https://jestjs.io/docs/en/snapshot-testing

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)