Search code examples
reactjstddjestjssnapshot

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

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?

Solution

  • 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