Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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?

like image 571
pranami Avatar asked May 07 '18 12:05

pranami


People also ask

What does Snapshot testing do in Jest?

Snapshot testing in Jest Snapshot testing is a type of output comparison testing. This type of testing ensures that your application adheres to the quality characteristics and code values of your development team.

Why is snapshot testing used for in React?

Snapshot testing has been created due to the need for an easier way to write tests for React components. Many React developers reported that they spend more time writing tests than the actual component. Therefore, snapshot testing allows React developers to quickly generate tests using its simple syntax.

What validation does Snapshot testing provide React?

Snapshot testing in React is a test method where we run a test and store a snapshot of the rendered HTML. Next time we run the test, we can verify that the HTML output of the component hasn't changed compared to the last time we ran the test.

What is snapshot testing used for in React Mcq?

Jest also provides Snapshot testing, the ability to create a rendered 'snapshot' of a component and compare it to a previously saved 'snapshot'. The test will fail if the two do not match. Snapshots will be saved for you beside the test file that created them in an auto-generate __snapshots__ folder.


2 Answers

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

like image 116
Iman Mohamadi Avatar answered Sep 22 '22 09:09

Iman Mohamadi


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

like image 30
t3__rry Avatar answered Sep 19 '22 09:09

t3__rry