1 00:00:01,020 --> 00:00:02,790 Instructor: In the last section we got our comment box 2 00:00:02,790 --> 00:00:06,390 and our comment list components inside of our App.js file. 3 00:00:06,390 --> 00:00:07,830 Now we're gonna move on to the fun part 4 00:00:07,830 --> 00:00:09,840 which is to create a test file 5 00:00:09,840 --> 00:00:12,020 and write some tests around this app. 6 00:00:12,020 --> 00:00:14,100 Now, in the past we spoke about how 7 00:00:14,100 --> 00:00:16,200 Jest loads up test files. 8 00:00:16,200 --> 00:00:18,840 When we were looking at this diagram right here, we had said 9 00:00:18,840 --> 00:00:22,320 that anytime we start Jest, it's gonna find any file inside 10 00:00:22,320 --> 00:00:26,310 of our project ending in .test.js. 11 00:00:26,310 --> 00:00:27,900 So you might think that's all we have to do to 12 00:00:27,900 --> 00:00:31,470 get started writing a test around our component right here 13 00:00:31,470 --> 00:00:35,040 is to create a file ending in .test.js. 14 00:00:35,040 --> 00:00:35,880 Well, in reality 15 00:00:35,880 --> 00:00:39,480 we get a little bit more decision making capacity than that. 16 00:00:39,480 --> 00:00:41,700 You see, Jest ends up being very flexible 17 00:00:41,700 --> 00:00:44,790 in deciding exactly what test files it's going to 18 00:00:44,790 --> 00:00:47,070 load when it first gets started. 19 00:00:47,070 --> 00:00:49,890 So in this diagram right here, I've placed 20 00:00:49,890 --> 00:00:53,760 in green boxes all the different valid spec file, 21 00:00:53,760 --> 00:00:55,050 or test file names 22 00:00:55,050 --> 00:00:58,110 that we could possibly use inside of our project right now. 23 00:00:58,110 --> 00:01:00,750 So these are all a hundred percent valid. 24 00:01:00,750 --> 00:01:02,370 So I'm inside the components directory. 25 00:01:02,370 --> 00:01:05,340 Here's our App.js file that we just made. 26 00:01:05,340 --> 00:01:09,630 We could create a file called App.spec App.test. 27 00:01:09,630 --> 00:01:11,640 We could also make a new directory 28 00:01:11,640 --> 00:01:15,400 inside this same folder called __test__ 29 00:01:16,740 --> 00:01:19,710 and then create any file inside there. 30 00:01:19,710 --> 00:01:22,350 So we have a tremendous amount of flexibility 31 00:01:22,350 --> 00:01:26,370 in deciding exactly where we want to place this test file. 32 00:01:26,370 --> 00:01:30,210 Now in this course we're going to follow the kinda decision 33 00:01:30,210 --> 00:01:31,320 or the nomenclature 34 00:01:31,320 --> 00:01:35,250 of creating a __test directory. 35 00:01:35,250 --> 00:01:38,040 So anytime you and I want to write a test around a file 36 00:01:38,040 --> 00:01:40,950 we'll create a folder in that same directory 37 00:01:40,950 --> 00:01:44,970 called __test__ and then we'll place all of our test 38 00:01:44,970 --> 00:01:46,484 files inside there. 39 00:01:46,484 --> 00:01:48,060 Personally I find that this leads 40 00:01:48,060 --> 00:01:50,370 to a very good degree of organization 41 00:01:50,370 --> 00:01:51,810 and it makes it really clear when you're looking 42 00:01:51,810 --> 00:01:55,083 at a test file versus an actual implementation file. 43 00:01:55,920 --> 00:01:59,340 So for our first component of App.js 44 00:01:59,340 --> 00:02:02,547 we'll make a new folder inside of our components directory. 45 00:02:02,547 --> 00:02:07,080 I'm gonna call that folder __. 46 00:02:07,080 --> 00:02:09,930 So notice there's two underscores here, two separate ones 47 00:02:11,550 --> 00:02:15,213 tests__, like so. 48 00:02:16,050 --> 00:02:17,220 And then inside that directory 49 00:02:17,220 --> 00:02:19,650 we're gonna make our actual test file 50 00:02:19,650 --> 00:02:23,253 which we will call app.test.js. 51 00:02:25,890 --> 00:02:27,510 Now, just to be a hundred percent clear 52 00:02:27,510 --> 00:02:29,250 this file right here, we could have left 53 00:02:29,250 --> 00:02:33,690 off that .test.js. That is not required at all. 54 00:02:33,690 --> 00:02:35,880 We could have left it just like this right here 55 00:02:35,880 --> 00:02:38,370 but now we have two files inside of our project 56 00:02:38,370 --> 00:02:40,170 that are called app.js. 57 00:02:40,170 --> 00:02:42,750 And for me personally, I think that's really unclear. 58 00:02:42,750 --> 00:02:46,170 So I really like to tack on the .test.js just 59 00:02:46,170 --> 00:02:49,080 because it adds more clarity to what's going on. 60 00:02:49,080 --> 00:02:52,560 So I'll do .test.js like so. 61 00:02:52,560 --> 00:02:54,450 Okay, so now inside of here we can start to write 62 00:02:54,450 --> 00:02:56,220 out our test logic. 63 00:02:56,220 --> 00:02:59,430 To get started, we'll first import React and React Dom 64 00:02:59,430 --> 00:03:01,980 and our component at the top of the file. 65 00:03:01,980 --> 00:03:04,480 So I'll write out import React from React 66 00:03:05,730 --> 00:03:09,630 I'll get React dom from React dom 67 00:03:09,630 --> 00:03:12,210 and we'll pull in our app component as well. 68 00:03:12,210 --> 00:03:15,000 So app from up one directory 69 00:03:15,000 --> 00:03:17,160 cuz now we're inside of the test directory. 70 00:03:17,160 --> 00:03:18,990 So we need to go up one directory 71 00:03:18,990 --> 00:03:21,573 and then get that app file like so. 72 00:03:22,470 --> 00:03:24,210 Okay, so that's a good place to get started. 73 00:03:24,210 --> 00:03:25,320 Let's take a quick pause. 74 00:03:25,320 --> 00:03:26,790 We're gonna come back to the next section 75 00:03:26,790 --> 00:03:28,560 and we'll start writing out the main body 76 00:03:28,560 --> 00:03:30,513 of our test suite inside this file.