Snapshot testing is mostly done on the reusable components of our application or parts of UI that do not change unexpectedly. Running snapshot testing is as easy as adding an expect using the toMatchSnapshot method.
Let's add a snapshot test to our home.component.spec.ts file. The following code is a simple test that mocks and generates the snapshot file of the component:
it('run snapshot', () => {
expect(fixture).toMatchSnapshot();
});
Now, when we run the test, we will see that a new file has been created inside the home directory, __snapshot__/home.component.spec.ts.snap, which has the snapshot of the HTML rendered inside it. Now, any changes that are made to our template will make the snapshot test fail.
In this section, we have covered how and why snapshot testing helps us. Let's move on to e2e.