Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Updating Snapshot" Lesson is part of the full, Complete Intro to React, v3 (feat. Redux, Router & Flow) course featured in this preview video. Here's what you'd learn in this lesson:

Demonstrating that with the introduction of Redux, Brian shows that most of the existing tests in the application fail because Redux is injected into the components. Brian explains how to use “unwrapped” components in the tests that are free of the Redux dependency. Then Brian updates the snapshot to include the new Header component implementation.

Get Unlimited Access Now

Transcript from the "Updating Snapshot" Lesson

[00:00:00]
>> Brian Holt: We are going to fix our tests cuz we broke them yet again. So I want you to go ahead and open search.jsx.
>> Brian Holt: We have a big problem here, in fact, I'm to show you just to prove that if I run yarn test here, I think all of them fail.

[00:00:19] Yep, total failure.
>> Brian Holt: For various reasons, you can see it's gonna give you the stack trace up there, but I'll explain to you why. The first thing that kind of sucks with Redux and integrating with connect is what are we actually exporting here? We're not actually exporting search, right, down here at the bottom, we're exporting a connected search.

[00:00:46] So let me demonstrate to you what I'm talking about using the dev tools. If I inspect here, I go into React, notice,
>> Brian Holt: Let's see, here I have search, right? But what's the component above it? It's a connected search, right? It's a component that wraps Search, and that's what Connect returns.

[00:01:13] It returns a connected search, right? This component inside of search.spec.jsx that we're importing right here is connected search, which means this search depends on Redux. Which is kind of a problem for us to test. Because, I don't wanna bring in Redux every time I wanna test this component.

[00:01:34] I wanna test Search. I don't wanna test Redux. So there is a couple of ways of mitigating this. I'm gonna show you kind of one of the easier ways. So come back to search .jxs really quick. Down here we're gonna have export default connect, and that's totally fine.

[00:01:54] But what we're gonna do here, is we're going to say export const Unwrapped = Search. The only place that we're ever going to use this is for testing purposes. But we're just going to export an unwrapped version of it, and that's gonna be called Search.
>> Brian Holt: So now, if we go back to Search.spec.jsx, we can come in here and say, import Unwrapped.

[00:02:30]
>> Brian Holt: And if you wanna make it like a little bit more succinct in the name you can say as UnwrappedSearch.
>> Brian Holt: That's how you do it, if I just said unwrapped right here it would be called unwrapped. But I wanna make it a little bit more accurate so I'm gonna call it as UnwrappedSearch, that's how you do that.

[00:02:53]
>> Brian Holt: Okay.
>> Brian Holt: Now with UnwrappedSearch, I can just call this UnwrappedSearch. And we also are going to have to give it a search term,
>> Brian Holt: Because it depends on that now
>> Brian Holt: So let's comment these tests out first. So I'm gonna say x test here, and not comment them out but stop running them.

[00:03:26] And I think,
>> Brian Holt: I think this should work now. If you say yarn test, I'm gonna stop my API server and close it.
>> Brian Holt: So our snapshot got updated here, right? Before we used to have header actually embedded into search. We changed that so now it's a different component that's a connect header, right?

[00:03:54] That's fine, that's what we expect. So we're gonna run this again as yarn test:update.
>> Brian Holt: And now, we have a passing test, right? We fixed one of them, so let's go fix another one.
>> Brian Holt: Same kinda story here, we're gonna say UnwrappedSearch
>> Brian Holt: And this is going to be,

[00:04:24]
>> Brian Holt: Search term = blank, our searchTerm, rather.
>> Brian Holt: And make that test again so it will run. Let's go make sure that that one works. So we're gonna say yarn test again.
>> Brian Holt: Two passed. Halfway there.
>> Brian Holt: So now we want to test this one and this one's a little bit tougher to test.

[00:04:57] There's a couple things that we could do here.
>> Brian Holt: We could test this,
>> Brian Holt: And rather than kind of going through the process and simulating the vent and all that stuff, we could try that. You can totally just do unwrappedSearch here and say searchTerm equals this is our search word.

[00:05:27] Then we wouldn't have to do this, stimulate business.
>> Brian Holt: I think that should for the most part work.
>> Brian Holt: So let's see if that works. I did not, I did, okay? And so this works, right? If you're happy with that test and you don't actually wanna test the user interaction, you just wanna test if you give it a search word, that it renders the right amount of cards, cool.

[00:06:00] This totally works.