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

Question

I am new to Jest testing and I was going through some examples of how test cases are written in Jest for React components. I came across Snapshot testing and was trying to understand what it is actually. And what I came across from the web is "Snapshot testing is a way to assert the result of a given test by generating a Json representation of its output." So i have 2 doubts in Snapshot testing as of now:

1) Let's say we have a simple component which has a simple paragraph. So, if I try to test it using Snapshot testing, how will it convert that into the JSON representation of the component? And when is it useful?

2) I came across an example which looked like:

Wrapper = shallow(<First_Component />);
        
it("displays the result", () => {
   const test = Wrapper.find(Second_Component).length;
   expect(test).toMatchSnapshot();
});

So, my question with the above code is how toMatchSnapshot() function works here?

Iman Mohamadi · Answer 1 · 2020-01-17T09:48:40.940

31

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

edited Jan 17 '20 at 09:48

answered May 02 '19 at 19:54

Iman Mohamadi

6,552
3
34
33

what is renderer ? – abdelhak.ajbouni Jan 12 '20 at 19:23
@AbdelhakAj I have updated my answer to satisfy your question, let me know if it's not clear. – Iman Mohamadi Jan 17 '20 at 09:49
My team's using Pipeline to run the test. How if the snapshot in git version is wrong and I need to update it? Should I commit with my local snapshot? If I do, will I pass the pipeline test on the first pull request? – Jeaf Gilbert Oct 11 '20 at 14:45

score 13 · Accepted Answer · edited Oct 15 '21 at 04:04

13

Snapshots allows you to test if your component renders correctly so in your case

expect(Wrapper).toMatchSnapshot()

If you want to test the number of occurence of a given component, import your second component and create your test:

it("displays the result", () => {
  const test = Wrapper.find(Second_Component).length;
  expect(test).toEqual(1); // or the number of occurrence you're expecting
});

If you're interested in JSON representation of your components you can use the enzyme-to-json package which serves this purpose

edited Oct 15 '21 at 04:04

Brian Destura

11,487
3
18
34

answered May 07 '18 at 12:55

t3__rry

2,817
2
23
38

First of all,thanks for the answer. So, what I have understood is that Snapshots keep a copy a the component and then tries to compare it with the new component.And the comparision is done by toMatchSnapshot( ) function.Am I correct? – pranami May 07 '18 at 13:09
And if that's the case, then what is the difference between "expect(test).toEqual(1);" and "expect(Wrapper).toMatchSnapshot();" ? – pranami May 07 '18 at 13:11
2

Hi @pranami in fact in your code when you test `Wrapper.find(Component).length` you test the number of occurence of the component `Component` rendered in the component you are currently testing. When you use `toMatchSnapshot` you are testing the 'overall' rendering of your component at a given time. This is why, say, you add an element inside your component you have to update the snapshot otherwise your test will fail. – t3__rry May 07 '18 at 14:55

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

2 Answers2