Testing React Applications, v2

Testing React Applications, v2 Snapshot Testing Solution

Topics:
Kent C. Dodds
Kent C. Dodds
Professional Trainer

This course is no longer being maintained. We recommend the testing section of the Intermediate React course instead. We now recommend you take the Intermediate React, v5 course.

Check out a free preview of the full Testing React Applications, v2 course:
The "Snapshot Testing Solution" Lesson is part of the full, Testing React Applications, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Kent walks through the solution for Snapshot Testing Exercise.

Get Unlimited Access Now

Transcript from the "Snapshot Testing Solution" Lesson

[00:00:00]
>> Kent C. Dodds: Okidoki, let's make this magic snapshot happen. So we'll go to login.step-3.todo. That's what we're doing, right? Step 3,step 4, sorry, login.step-4.todo. Great, so to take a snapshot, I'm going to get the container. And I can use render, I don't have to render it into the document to get a snapshot.

[00:00:28] So I'll pull in render from react-testing-library and we'll just render the login. And because I'm not actually gonna be clicking the submit, I don't really need to have any sort of useful function there. So I'll just pass nothing. I don't think it has prop types on it so I'm probably fine with just that and then I will expect the container.firstChild to match snapshot.

[00:00:55] So, the reason I do first child is because the container's always going to be a div and so I don't really need to include that in my snapshot, it doesn't really change. If you were rendering a react fragment and have multiple elements in there then first child would only get the first one, so consider that but in this case we're rendering a div as a root anyway so we're good.

[00:01:16] So I save that and we get snapshot written and here is our snapshot summary. One snap chat written and one test read. So we can then look at our snapshots. Check out log in step forward.to do. That is our one snapshot, cool. And it shows us our CSS.

[00:01:36] These are not actually the class names that would be applied if you are curious to learn more about glamour and glamorous. You can check out the docs, but that's not what it would look like. It's just the snapshot serializer does this so that it's more, like if you make changes to the CSS, it doesn't change the hash that it's using.

[00:01:55] And so the snapshot is more stable. But yeah, it's kind of nice, like if I were to change the align items to VLeft, I would see that update in my snapshot. So it's really, really one of the reasons why I kind of like snapshots is so that I can get some sort of idea of when my CSS is changing and what impact that CSS change has on other parts of my application where it's snapshotted.

[00:02:19] But then here we have our dom. And it all looks to be in order. And so you'd commit this to your source control and push it up. You get port request reviewed and everything is awesome.