1 00:00:00,840 --> 00:00:02,670 -: In the last section, we made a small change 2 00:00:02,670 --> 00:00:04,980 to the app.test.js file. 3 00:00:04,980 --> 00:00:07,020 So we added this line of code right here. 4 00:00:07,020 --> 00:00:08,550 We then went over to our terminal 5 00:00:08,550 --> 00:00:09,780 and executed our test suite 6 00:00:09,780 --> 00:00:12,240 by running the command NPM Run test. 7 00:00:12,240 --> 00:00:13,410 So in this section we're going to talk 8 00:00:13,410 --> 00:00:16,200 about what happened when we ran that command. 9 00:00:16,200 --> 00:00:18,240 After we get a better idea of what happened 10 00:00:18,240 --> 00:00:19,080 we'll then go back over 11 00:00:19,080 --> 00:00:22,770 to our project and start working on our first application. 12 00:00:22,770 --> 00:00:25,650 All right, so quick diagram here. 13 00:00:25,650 --> 00:00:26,490 So a little bit ago, 14 00:00:26,490 --> 00:00:28,680 you and I used a tool called Create React App 15 00:00:28,680 --> 00:00:30,480 to generate a new project. 16 00:00:30,480 --> 00:00:32,369 When we made that project, we got a bunch 17 00:00:32,369 --> 00:00:36,330 of dependencies installed into that project automatically. 18 00:00:36,330 --> 00:00:39,510 Top among that list is the React Library itself. 19 00:00:39,510 --> 00:00:41,280 We also got tools like Webpack 20 00:00:41,280 --> 00:00:43,950 and Babel for linking together JavaScript files 21 00:00:43,950 --> 00:00:45,510 and turning our JavaScript code 22 00:00:45,510 --> 00:00:49,710 and JSX code into ES5 compatible code. 23 00:00:49,710 --> 00:00:51,390 One other library that was installed 24 00:00:51,390 --> 00:00:55,860 into our project automatically was the Jest test suite. 25 00:00:55,860 --> 00:00:59,190 Jest is what we refer to as an automated test runner. 26 00:00:59,190 --> 00:01:01,950 It's job is to take all the different test files that you 27 00:01:01,950 --> 00:01:03,930 and I create inside of our project, 28 00:01:03,930 --> 00:01:05,370 run the tests inside them 29 00:01:05,370 --> 00:01:08,220 and then print the output back to us inside the terminal. 30 00:01:09,060 --> 00:01:10,140 Let me give you a better idea 31 00:01:10,140 --> 00:01:13,380 of what happened when we executed that NPM run test command 32 00:01:13,380 --> 00:01:15,720 at the terminal in the last section. 33 00:01:15,720 --> 00:01:16,553 So we start up here 34 00:01:16,553 --> 00:01:19,830 at the top where we executed that command at the terminal. 35 00:01:19,830 --> 00:01:22,380 When we ran that, it automatically started up 36 00:01:22,380 --> 00:01:24,390 the Jest test runner. 37 00:01:24,390 --> 00:01:25,890 Jest then went through a couple 38 00:01:25,890 --> 00:01:28,860 of automated steps to run all the tests inside 39 00:01:28,860 --> 00:01:30,360 of our project. 40 00:01:30,360 --> 00:01:32,910 First off, it looked over all the different files 41 00:01:32,910 --> 00:01:36,030 and folders inside of our SRC directory. 42 00:01:36,030 --> 00:01:38,490 It looked for every file inside there that ended 43 00:01:38,490 --> 00:01:42,570 with the file extension of .test.js 44 00:01:42,570 --> 00:01:47,130 and it executed all the tests inside of each of those files. 45 00:01:47,130 --> 00:01:50,250 So in our case, Jest started up, it looked inside 46 00:01:50,250 --> 00:01:54,840 the SRC directory and then it found the app.test.js file, 47 00:01:54,840 --> 00:01:57,660 where you and I had written a little bit of testing code. 48 00:01:57,660 --> 00:01:59,700 Well, maybe just this one line right here, 49 00:01:59,700 --> 00:02:01,550 but we'll take credit for everything. 50 00:02:02,430 --> 00:02:05,490 After Jest found that test file and executed the test 51 00:02:05,490 --> 00:02:07,920 inside of it, it then printed out the results 52 00:02:07,920 --> 00:02:09,780 of that test to the terminal. 53 00:02:09,780 --> 00:02:12,480 And so that's what we saw back over here. 54 00:02:12,480 --> 00:02:15,120 You'll notice it at the top Jest printed out 55 00:02:15,120 --> 00:02:19,050 that it found the file called app.test.js 56 00:02:19,050 --> 00:02:22,140 and then it executed the one test that was written inside 57 00:02:22,140 --> 00:02:23,220 there. 58 00:02:23,220 --> 00:02:26,070 The string right here of "renders without crashing" 59 00:02:26,070 --> 00:02:28,860 is coming from this line of code right here. 60 00:02:28,860 --> 00:02:31,770 So you'll notice that string is completely identical. 61 00:02:31,770 --> 00:02:34,020 The fact that there's the nice green checkbox back 62 00:02:34,020 --> 00:02:37,680 to it back over here means to say that all the code inside 63 00:02:37,680 --> 00:02:40,020 of this test, so all this stuff right here, 64 00:02:40,020 --> 00:02:41,940 was executed successfully 65 00:02:41,940 --> 00:02:44,133 and all this testing code looks good to go. 66 00:02:45,630 --> 00:02:49,110 Now after Jest ran and printed that output to the terminal 67 00:02:49,110 --> 00:02:51,540 it then sits around and waits for a file inside 68 00:02:51,540 --> 00:02:53,190 of our project to change. 69 00:02:53,190 --> 00:02:55,650 And any time that happens, the Jest test runner 70 00:02:55,650 --> 00:02:58,560 will automatically once again find all the different 71 00:02:58,560 --> 00:03:02,790 files ending in .test.js, load those file up 72 00:03:02,790 --> 00:03:05,550 and execute the test to find inside of each one, 73 00:03:05,550 --> 00:03:07,350 print out the results and then again 74 00:03:07,350 --> 00:03:09,993 sit around and wait for another file to change. 75 00:03:10,980 --> 00:03:13,980 So right now, the entire core of our entire test suite 76 00:03:13,980 --> 00:03:15,240 or all the testing code we have 77 00:03:15,240 --> 00:03:18,150 inside of this basic application really revolves 78 00:03:18,150 --> 00:03:20,070 around this Jest library. 79 00:03:20,070 --> 00:03:21,990 And so as you might guess throughout this course 80 00:03:21,990 --> 00:03:24,360 we're going to get a lot of experience working directly 81 00:03:24,360 --> 00:03:29,070 with Jest and getting a better idea of exactly how it works. 82 00:03:29,070 --> 00:03:30,690 So let's take a quick pause right here 83 00:03:30,690 --> 00:03:31,920 now that we've got a better idea 84 00:03:31,920 --> 00:03:33,750 of what Jest is doing for us. 85 00:03:33,750 --> 00:03:35,100 We'll continue in the next section 86 00:03:35,100 --> 00:03:37,860 and talk about the application we're going to build 87 00:03:37,860 --> 00:03:40,290 to get a better idea of how testing works. 88 00:03:40,290 --> 00:03:42,790 So quick break, and I'll see you in just a minute.