Check out a free preview of the full Complete Intro to React, v3 (feat. Redux, Router & Flow) course:
The "Testing Reducers" 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:

Brian creates a reducers.spec.js file for testing the reducers. Since the Redux developer tools can write the test for you, Brian demonstrates how easy it is to write a test for reducers by creating a couple of tests for the reducers using the Redux developer tools. Brian takes questions from students.

Get Unlimited Access Now

Transcript from the "Testing Reducers" Lesson

[00:00:00]
>> Brian Holt: And now we're gonna get into testing Redux which is way more fun. Why is it fun? Because you don't have to actually write the test, the dev tools will write tests for you.
>> Brian Holt: So let me show you what I mean unless there's any questions.
>> Brian Holt: All right, let's keep going then.

[00:00:20] So,
>> Brian Holt: Refreshing the page, we're still on the search page. And I wanna test right now the ability to do search, right? So what I'm going to do is copy the word black,
>> Brian Holt: And I'm going to paste it in here so I have one atomic action if I'm going from empty string to black.

[00:00:48] So I'm gonna paste that, okay? That dispatched one action to the Redux store, right? So my state went from empty string to black. So now if I go in here to Redux, the tools, down at the bottom, I'm gonna go into Inspector, okay? I'm gonna click on this SEARCH_TERM one, right?

[00:01:08] That's the action that I care about at this moment. And you can see here I went from empty string to black, exactly like I expected, okay? Notice that this test thing over here? I'm going to click on that, and if you look at this. This is a test case written just for you without doing anything.

[00:01:31] I can literally just copy that, go over here, create a new file. This is still going into the test directory inside of JS. I'm gonna call it Reducers.spec.js. Going to paste that in there. It did get the path wrong, so you're gonna have to fix the path, but it's a small price to pay in my opinion.

[00:02:00]
>> Brian Holt: And I'm going to save it
>> Brian Holt: You're gonna have to fix some Lint errors there, but again, it's not too bad.
>> Brian Holt: And now I have a free test case. It's not really doing anything too crazy, it's pulling in the route reducer, it's saying, given this initial state, which is the initial state of your app, given this action I expect that to equal this.

[00:02:38]
>> Brian Holt: So now, if I go in here and say yarn test, I should have a passing test.
>> Brian Holt: Which I do.
>> Brian Holt: I get super excited about this because this is just free, right? It's like I don't have to do anything, I just have to copy and paste, fix my lint errors, and it's just done.

[00:02:59] So I'm gonna make this a little bit more succinct. What we're actually testing here is SET_SEARCH_TERM. I think that's helpful, so that people can know that that's exactly what you're testing. If you wanted to you could go in here and create several test cases of like, going from black to two or something like that.

[00:03:20] But for now I'm plenty pleased with this. So let's go in and do the same thing for our API test case. So let's do west and go into Westworld. So I'm going to open Westworld but I'm actually going to refresh the page cuz I'm interested in going from no state to having a state.

[00:03:45] So if we look down here, I need the API server to be up as well. So I'm gonna go into talks fem, so I'm back in my directory, I'm gonna say Yarn api.
>> Brian Holt: And now, I'm gonna refresh the page
>> Brian Holt: And now I get this test case back.

[00:04:14] So I'm gonna click on, the ADD API one.
>> Brian Holt: I need Inspector, so this one right here, click on that, click on Test. Something worth noting is there are multiple templates here. So if you wanna do a Mocha test or a Tape test or an Ava test, it's not tied to Jest, you don't have to use Jest, that's just the one that we're using, okay?

[00:04:39] I'm gonna copy my test here, come in here, it's grabbing all of the API data, which is fine with me.
>> Brian Holt: This is gonna be ADD_API_DATA. Then I'm gonna say const state = blah and lo and behold, we have another test case. And it's gonna do all sorts of nice formatting.

[00:05:04] Think you're prettier and let's go run our test to make sure it's working where we anticipate. Yarn test, all passing. So, cool? Two free test cases.
>> Brian Holt: Any questions about that so far?
>> Speaker 2: If you were to restart you API server though, it would be in a different rating so this test case could sort of fail.

[00:05:36]
>> Brian Holt: This isn't actually hitting the API though, right? It's calling reducer with this search term, or this initial stage.
>> Speaker 2: Okay.
>> Brian Holt: And this action. It came from the API once, right? But it's the same store, given this action it looks like this. That's gonna be true always.

[00:05:58]
>> Speaker 2: Got you.
>> Brian Holt: I think you're hitting something on an important concept here, is that this is why Redux is so awesome. This is why I absolutely adore it, is that given a action and an initial state, it returns a new state. And that's really easy to test right?

[00:06:14] Input in, output out, nothing in between right like that's really it. So given this state, given this action it looks like this. And if you want to test something more complicated, right? If I come in here and say,
>> Brian Holt: For example, let's say I had a bug that if I won't go into Westworld, then go back out, and immediately go into Game of Thrones, I have some bug.

[00:06:39] Let's say I fixed it, and I wanna make sure that doesn't happen again. I can come back in here on the second one, and I go in here and say test, right? Actually it's giving me the test case of going from having just Westworld, having west world and Game of Thrones, right?

[00:06:57] So feel free again to come in here. This is gonna be a longer test case, right? But if I come in here and say that, just say Const state.
>> Brian Holt: And this is ADD_API_DATA with two shows, right? Now I have another test case that tests that, as well.

[00:07:20] Again, you can run here in test.
>> Brian Holt: And I have one failing. Yeah, cuz I didn't delete the import reducers up here.
>> Brian Holt: So that's up to you. It depends on how crazy you wanna get, right?
>> Brian Holt: For me, one of the things that really drives what test case I write is I wait for something to fail, right?

[00:07:45] I fix it and then I write another test case so I don't regress that way again. That's been a pretty successful strategy for me. Typically test the happy path like making sure that the things work the way that I anticipate. I will test error cases that anticipated might hit and then from there, I just kinda wait for errors to come in.

[00:08:04] Once I fix an error, I try and write a test so I don't regress back to into that.
>> Brian Holt: Cool, any other questions?
>> Brian Holt: Cool.
>> Brian Holt: So
>> Brian Holt: That's how your gonna test the reducers, that's the really easy way of doing it. There's nothing to say you can't go write these tests yourself, but why not get them for free?