This course has been updated! We now recommend you take the Complete Intro to React, v8 course.
Transcript from the "Testing actionCreators" Lesson
[00:00:00]
>> Brian Holt: Let's go ahead and go create some test specs for аctionCreators, since those are easy to test as well. actionCreators.spec.js, okay. The other thing is you can go into reduce.spec. This should be a flow document as well. No reason that it can't be.
>> Brian Holt: That shouldn't cause any errors, so good.
[00:00:29]
>> Brian Holt: Let's go add flow into this document. This is the actionCreators.spec.js, here we're going to import our two action creators setSearchTerm and add API data.
>> Brian Holt: From ' ../ actionCreators'.
>> Brian Holt: So first one we're gonna test here is test('setSearchTerm'), which is gonna be a function.
>> Brian Holt: So we're going to expect, if we pass it a setSearchTerm.
[00:01:25]
>> Brian Holt: Okay, and then say we pass it a search, and we've been using black this whole time, but here in my notes I have New York, so we'll just say that, New York, so.
>> Brian Holt: Let's go take a look at the actionCreator itself. If we pass in New York here, what do we expect to get back from it?
[00:01:44] We expect to get back a well-formed object of type set, search term, and payload of whatever that string that we passed in is, right? Now, remember that jest has that ability to do snapshots, right? The only thing that snapshot its just a json structure, right? So like, our snapshots that were generating through React is just a json representation of what our components look like, right?
[00:02:15] Well, if we go in here to our actionCreators, or actionCreators.spec, actionCreator.spect.js, setSearchTerm is just going to return a json structure, right? So we can actually just say, toMatchSnapShot here, and leverage that same ability. So now, this json structure really shouldn't change over time, right? And if it does change, we wanna be well aware of that's what's happening.
[00:02:48] So to test actionCreators, it's really just snapshots. I mean, I could come in here and say, to equal,
>> Brian Holt: type: 'SET_SEARCH_TERM' and then payload,
>> Brian Holt: 'New York'. I mean, that's fine too, but why not leverage that snapshot ability? So that's what we're gonna do here.
>> Brian Holt: So, again we're gonna say yarn test, so the first time it's gonna create our snapshot.
[00:03:28] You can go in here and actually look at our snapshot, actionCreators.spec.snap, and we expect the first one to equal that particular objects that we created with actionCreator. What I like about this is, say decide that later I wanna a different test case or maybe, no this is even better, let's actually go into actionCreators and let's say we start using the error ability of this, right.
[00:03:52] And I say error; null, or something like that. Now it's gonna fail, right, yarn test.
>> Brian Holt: This fails because here I started adding this error ability, right? But now it's really easy to update if that's what I anticipate, so I can just say yarn test:update, right? So that's why I like the snapshot tests is that they're really easy to update as your app evolves right?
[00:04:20] Your tests evolve with you, and you don't actually have to do a lot of extra coding to get there. So,
>> Brian Holt: Coming back here and say yarn test, and it passes. As you might imagine, going back to our actionCreator.spec, actionCreator.spec, testing addAPIData is going to be just as easy.
[00:04:44] addAPIData, here we're just going to say expect,
>> Brian Holt: Put this on multiple lines, addAPIData. And we're just gonna give it some sort of API data of like 0.8. title, in fact, we could just really grab this from data.json. So we'll just grab Stranger Things here.
>> Brian Holt: Go back to actionCreators.spec.
[00:05:18] Just going to paste that right there. And we're gonna give it a rating, because that's ultimately what's coming back from the API, so "rating":, I don't know, "8.6", something like that.
>> Brian Holt: And then here we'll say toMatchSnapshot, and voila.
>> Brian Holt: And we're gonna say yarn test here.
>> Brian Holt: And now we have an extra snapshot, so we can detect if something happens with an API data if it drifts in one direction or the other.
[00:05:57] So if you look at the snap, just to make sure that everything looks like what you want it to. payload, that's gonna be this object here, and type is going to be add API data, that's exactly what we expect. So cool, everything is good, it all works.
>> Brian Holt: So testing actionCreators is really easy.
[00:06:19] It's a snap? No, okay. [LAUGH]
>> Brian Holt: That was horrible, okay. Any questions about that? So this is why, again, one of the reasons I really, really like Redux is it makes testing these kind of micropieces of changing state pretty ironclad now. I'm guaranteed now that set search term is going to create these objects the way I anticipate, and this is well tested, and I trust it now.