37

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?

2 Answers 2

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

3
  • what is renderer ? Commented Jan 12, 2020 at 19:23
  • @AbdelhakAj I have updated my answer to satisfy your question, let me know if it's not clear. Commented Jan 17, 2020 at 9: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? Commented Oct 11, 2020 at 14:45
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

3
  • 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
    Commented May 7, 2018 at 13:09
  • And if that's the case, then what is the difference between "expect(test).toEqual(1);" and "expect(Wrapper).toMatchSnapshot();" ?
    – pranami
    Commented May 7, 2018 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
    Commented May 7, 2018 at 14:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.