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?
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