Illustrated Snapshot Testing

Behzad Ali Mohammad Zad — Wed, 23 Mar 2022 22:15:17 +0000

First, I want to say that for many cases you don’t need to use snapshot testing. You can find a good article here: What Are Proper Use Cases For Snapshot Testing React Components?.

Second, if you are interested in software quality and testing then it is better to know about tools and concepts although some of them are rarely used.

Let's take a look at how snapshot testing works ( example is in Jest ):
expect(component).toMatchSnapshot();

The process:

The result:

Some tips:

Visual regression testing tools take screenshots of web pages and compare the resulting images pixel by pixel.
With Snapshot testing values are serialized, stored within text files, and compared using a diff algorithm and this is why it's made.
Commit snapshots and review them as part of your regular code review process.

Resources:

Jest Snapshot Testing
Youtube
Snapshot testing React components with Jest

Illustrated Typescript: is keyword

Behzad Ali Mohammad Zad — Tue, 15 Mar 2022 13:38:42 +0000

This is my first article and I'm trying to visualize my articles and called it Illustrated series.

I hope the attached photos are really better than 1000 words for you.

What is is keyword in Typescript? Let's see:

Imagine, you want to publish a lib that contains some utility functions like below:

We do not have any access to Date methods because the function returns a boolean and why we should access to Date methods?

Typescript performs User-Defined Type Guards and it would be better if we performed a type checked:

If the isDate function returns true, TypeScript will narrow the type to Date in if block and now, we have access to Date methods.

Try it online.

Have a good day/night with Typescript.

DEV Community: Behzad Ali Mohammad Zad

Illustrated Snapshot Testing

Illustrated Typescript: is keyword