Testing React Applications, v2 Snapshot Testing Exercise

Transcript from the "Snapshot Testing Exercise" Lesson

[00:00:00]
>> Kent C. Dodds: Before we get into that exercise, there's one other thing that I wanted to mention, is with jest you can actually configure how these snapshots are being serialized using custom snapshot serializers. And so, the custom snapshot serializer can take what jest wants to snapshot, and based off of some information, it can remove things.

[00:00:23] I can say hey, I don't wanna ever show h2s. Or if you're doing a CLI and it prints out the full path to something, you can actually swap that out for project route or whatever, so it works on your friend's computer or whatever. But another thing that you can do with snapshots, you'll notice that when you do your snapshot for the log in, is if you're using CSS and JS, then all of the CSS that's being generated as you're rendering things out, will live in memory somewhere.

[00:00:58] In our case, we're using glamorous. And so the snapshot serializer can say, hey, glamour, what's the CSS you would have generated if we were running in a real browser? It will give that to you and you can say, okay, based off of what's in the rendered DOM, I'm going to insert that CSS above the rendered DOM.

[00:01:18] So you'll see that in your snapshot that it not only includes the HTML, but also the CSS that would be rendered, which is just like what? Very cool, very, very cool. So you'll see that when you're doing this. And because you want to know about configuration and stuff, that's actually pretty simple.

[00:01:39] Snapshot serializers, and you pass the names of modules. There's one for stout components, actually this one's based on the stout components one and there are various other serializers that can be pretty handy. Okay, cool. So let's go ahead and get running with npm run test:client.
>> Kent C. Dodds: And then go to step-4.todo and scroll down to this snapshot test.