1 00:00:02,000 --> 00:00:08,070 We learned how to test containers and I mentioned that the important part is that you don't test the connection 2 00:00:08,070 --> 00:00:09,060 to redux, 3 00:00:09,270 --> 00:00:12,630 how do you test redux then, do you test it at all? 4 00:00:12,630 --> 00:00:17,340 The answer is yes we test it but we have to be careful about what we test. 5 00:00:17,340 --> 00:00:24,100 We probably don't want to test very complex chains of actions and reducers and state, in the end the 6 00:00:24,100 --> 00:00:30,540 reducers are the meat we want to test especially if we follow the pattern of not putting too much 7 00:00:30,540 --> 00:00:36,740 logic in the action creators. Then testing reducers is super simple, 8 00:00:36,840 --> 00:00:42,000 there's synchronous so we don't have to deal with async code and there are just functions, 9 00:00:42,000 --> 00:00:43,260 we pass something in, 10 00:00:43,410 --> 00:00:48,110 we get something out like for example for authentication, 11 00:00:48,180 --> 00:00:50,600 let's say we want to write a test for this. 12 00:00:50,640 --> 00:00:57,510 So add an auth.test.js file, here we don't even need enzyme because we're not testing any react 13 00:00:57,510 --> 00:00:58,230 components, 14 00:00:58,230 --> 00:01:05,820 we don't need to render anything, we just test normal javascript code, we test functions, the reducer function. 15 00:01:06,270 --> 00:01:16,230 So what I just do here is in the test file, I first of all import the reducer function from ./auth.js 16 00:01:16,230 --> 00:01:20,790 in this file, in this case like that 17 00:01:20,910 --> 00:01:26,970 and now I also need to import the action types so as action types, I import everything from ./actions 18 00:01:26,970 --> 00:01:28,810 action types 19 00:01:29,010 --> 00:01:30,730 and now we just write the test. 20 00:01:30,900 --> 00:01:32,680 So again we have describe, 21 00:01:33,030 --> 00:01:39,730 I now give this a clear description we can see in the console like the auth reducer 22 00:01:40,170 --> 00:01:44,200 and then in the function here, we can write the many tests we have. 23 00:01:44,340 --> 00:01:49,140 Obviously we can again use beforeEach to do some general configuration if we need to 24 00:01:49,440 --> 00:01:51,730 but I want you to start right with the tests, 25 00:01:51,810 --> 00:01:52,800 so it 26 00:01:52,800 --> 00:01:59,550 and now let's see what we test, let's for example test that we get the right initial state if we actually 27 00:01:59,550 --> 00:02:02,680 pass an invalid action type to it, 28 00:02:02,730 --> 00:02:08,340 so it should return the initial state, 29 00:02:08,340 --> 00:02:09,920 could be the description here. 30 00:02:10,620 --> 00:02:18,060 And then I pass my javascript function and in there, I now expect my reducer 31 00:02:18,240 --> 00:02:19,350 if I execute it 32 00:02:19,350 --> 00:02:25,140 so now inside expect, I simply execute the code I want to test, just as before with wrapper but now with 33 00:02:25,140 --> 00:02:31,860 a normal javascript function and it will actually pass undefined here as an initial state, that is the 34 00:02:31,860 --> 00:02:39,840 case when the state is just getting set up at the beginning of our app and the action is just an empty object, 35 00:02:39,850 --> 00:02:42,250 so no specific action. 36 00:02:42,270 --> 00:02:47,470 So in this case I expect my state to equal 37 00:02:47,730 --> 00:02:53,910 and now it should equal my initial state defined in the reducer function of course 38 00:02:54,000 --> 00:02:56,660 so this javascript object, 39 00:02:56,880 --> 00:02:58,550 that is exactly what I test for, 40 00:02:58,560 --> 00:03:01,560 it should equal that object. 41 00:03:01,560 --> 00:03:05,080 Now if we save that file, this should be executed too, 42 00:03:05,220 --> 00:03:08,060 and it is auth.test.js is executed 43 00:03:08,370 --> 00:03:13,710 so there, we now see that that is successful and this is how easy you can test a reducer. Of course 44 00:03:13,710 --> 00:03:21,030 you can also test for specific cases, so we can write another test where it should store the token 45 00:03:21,170 --> 00:03:23,760 upon login 46 00:03:23,760 --> 00:03:34,340 and now in this function here, I actually expect to execute a reducer function with let's say the initial 47 00:03:34,340 --> 00:03:38,920 state and we could set this up in beforeEach. 48 00:03:39,110 --> 00:03:39,460 So I 49 00:03:39,470 --> 00:03:48,190 execute the reducer function with the initial state and with an action where the type is actionTypes.AUTH_SUCCESS 50 00:03:48,200 --> 00:03:54,360 and now of course we need to pass the correct payload with that action here too, 51 00:03:54,500 --> 00:03:58,570 so not only the type but also the payload of that action 52 00:03:58,750 --> 00:04:03,710 and we can see that payload of course in our action creators file. In AUTH_SUCCESS, we also pass 53 00:04:03,770 --> 00:04:07,890 ID token and user id, so that is something we should pass on here 54 00:04:07,890 --> 00:04:17,120 too, and that could be some token, the exact value of course doesnt matter for the test and some user ID. 55 00:04:17,500 --> 00:04:21,040 Now that is the reducer function, how we execute it. 56 00:04:21,040 --> 00:04:27,490 Now we expect it to spit out an updated state which respects this token and user id, so the updated 57 00:04:27,490 --> 00:04:37,270 state should equal our initial state in general but the token of course should be some token and here, 58 00:04:37,270 --> 00:04:42,650 that has to be the exact value here, if it weren't then something would be wrong inside our reducer, 59 00:04:42,790 --> 00:04:44,610 that's the idea behind testing, 60 00:04:45,620 --> 00:04:48,910 the user ID should therefore be some user ID. 61 00:04:48,960 --> 00:04:57,600 Now if we save this, this also passes and as soon as I change the expected value to some user, it fails 62 00:04:57,840 --> 00:05:00,020 because now we have differing values. 63 00:05:00,360 --> 00:05:07,410 So this is how we can also test reducers, they are pure functions and therefore very simple to test.