This course has been updated! We now recommend you take the Complete Intro to React, v7 course.

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

The introduction of Redux means most of the existing tests in the application are failing. This is because Redux is injected into the components but now present during the tests. Brian demonstrates how to use “unwrapped” components in the tests that are free of the Redux dependency. He then updates the snapshot to include the new Header component implementation.

Get Unlimited Access Now

Transcript from the "Testing Redux: Updating the Snapshot" Lesson

>> Brian Holt: If we go back to, and I pushed v2-21 if anyone needs a new bundle or a new whatever, a new branch. So if we do npm run test right now it's just gonna barf all over us. I don't think any of them pass.
>> Brian Holt: So let's do npm.

>> Brian Holt: So snapshot failed, 3 tests failed, 0 passed, right? Everything broke in this process. Because we introduced Redux, and Redux just threw a whole of wrenches into our tests, rIght? Because now our components depend on Redux being there, and the way that they get Redux injected into them is through a provider, and provider is provided through the route.

[00:00:55] Sorry, through the router. And so, because the router is not present, we have to somehow account for that.
>> Brian Holt: So let's go do that. So go back to Search.js.
>> Brian Holt: So down here at the bottom we're exporting a connected search. But this doesn't actually gonna work because, unless Redux has to be there or connect is gonna fail.

[00:01:27] So how can we get around that? Well, you'll see it's pretty common in these sort of scenarios for people to do something like this. They're gonna say export const Unwrapped = Search. So this Unwrapped right here is purely for testing purposes. So it's the same component it's just not wrapped inside of Redux.

[00:01:58] So now we can go back to search.spec.js.
>> Brian Holt: And up here at the top where we import search, we can also import.
>> Brian Holt: Unwrapped.
>> Brian Holt: As UnwrappedSearch.
>> Brian Holt: The reason I do this is I rename it to be UnwrappedSearch so it's a little bit more clear what Unwrapped is.

>> Brian Holt: Okay? So now I have this that's not dependent on Redux. So here on Search I can make this, instead of being Search, it can be UnwrappedSearch. And then I just have to pass the same things that Redux would have passed in, right? So I passed in shows={preload.shows}.

>> Brian Holt: And searchTerm= empty string, right? Those are the two things that Redux would have passed into search. But we can just kind of like, manually do it to get it up and going, okay? So I'm just gonna comment out the other two tests so we can just test this first test.

[00:03:35] I saved that and come back here and try and run npm test again.
>> Brian Holt: So our snapshot is failing cuz compared to last time, we now have abstracted out our header, right? Which is a connected header. Whereas before we had the header just written straight in there. This is what we expect, this is good, so now we're going to run npm run update-test.

>> Brian Holt: And now we have a new snapshot, and we have fixed our first test.