1 00:00:00,720 --> 00:00:02,730 -: In the last section, we used create React app 2 00:00:02,730 --> 00:00:04,680 to generate a new project that we're going to 3 00:00:04,680 --> 00:00:06,810 use to learn more about testing. 4 00:00:06,810 --> 00:00:08,250 In this section, we're going to open 5 00:00:08,250 --> 00:00:10,171 up that new project that we just generated 6 00:00:10,171 --> 00:00:12,673 and run our first test inside of it. 7 00:00:12,673 --> 00:00:14,220 I'll first begin by changing 8 00:00:14,220 --> 00:00:16,777 into the testing directory that we just created 9 00:00:16,777 --> 00:00:20,373 and then I'm going to open up my code editor inside of here. 10 00:00:21,570 --> 00:00:23,670 All right, so here's my editor 11 00:00:23,670 --> 00:00:26,430 and when we first create a project using Create React app 12 00:00:26,430 --> 00:00:27,263 we get a couple 13 00:00:27,263 --> 00:00:30,240 of different files and folders automatically generated. 14 00:00:30,240 --> 00:00:32,880 Inside the SRC directory are two files that you 15 00:00:32,880 --> 00:00:34,620 and I are going to spend a pretty good amount 16 00:00:34,620 --> 00:00:38,340 of time looking at, and that is the app dot js file 17 00:00:38,340 --> 00:00:41,282 and the app dot test dot js file. 18 00:00:41,282 --> 00:00:44,760 The app dot js file contains the root component 19 00:00:44,760 --> 00:00:47,370 of this very basic React application 20 00:00:47,370 --> 00:00:49,110 and so inside of here you'll find its render 21 00:00:49,110 --> 00:00:53,670 method that contains just a little bit of jsx right here. 22 00:00:53,670 --> 00:00:56,640 Now, to do a little demo of testing 23 00:00:56,640 --> 00:00:58,650 we're gonna take all the jsx that's inside 24 00:00:58,650 --> 00:01:00,690 of here right now and we're going to replace all 25 00:01:00,690 --> 00:01:05,289 of it with the single div that just says hi there like so. 26 00:01:05,289 --> 00:01:09,480 So I've got one single element that returns the text. 27 00:01:09,480 --> 00:01:10,710 Hi there, that's it. 28 00:01:10,710 --> 00:01:12,750 Nothing else inside of here. 29 00:01:12,750 --> 00:01:14,910 I'm gonna save this file and then I'm going to go 30 00:01:14,910 --> 00:01:17,729 over to that app dot test dot js file. 31 00:01:17,729 --> 00:01:19,558 So here it is right here. 32 00:01:19,558 --> 00:01:21,300 Inside this file is some amount 33 00:01:21,300 --> 00:01:24,270 of code to test the component that we were just looking at. 34 00:01:24,270 --> 00:01:25,103 At present. 35 00:01:25,103 --> 00:01:27,900 All this code does is try to render that app component 36 00:01:27,900 --> 00:01:29,670 and make sure that nothing crashes 37 00:01:29,670 --> 00:01:32,369 or nothing goes wrong during that process. 38 00:01:32,369 --> 00:01:35,161 We're gonna make a tiny change to this code right here 39 00:01:35,161 --> 00:01:38,160 with this tiny change we're gonna make, we're gonna verify 40 00:01:38,160 --> 00:01:41,160 that the app component contains the text hi there 41 00:01:41,160 --> 00:01:43,080 that we just placed inside of it. 42 00:01:43,080 --> 00:01:45,030 So that's going to be the sole purpose 43 00:01:45,030 --> 00:01:47,549 of this first test that we're going to write. 44 00:01:47,549 --> 00:01:48,870 To write that test 45 00:01:48,870 --> 00:01:51,900 I'm gonna find the React om dot render line right here 46 00:01:51,900 --> 00:01:54,650 and I'll create a new line of code right underneath it. 47 00:01:55,787 --> 00:01:57,090 Then inside of here 48 00:01:57,090 --> 00:02:02,090 I'm going to say Expect div inner html, and notice 49 00:02:03,090 --> 00:02:07,380 that this is inner HTML with capital HTML right here. 50 00:02:07,380 --> 00:02:10,470 And then I'll say dot two contain 51 00:02:10,470 --> 00:02:12,840 and I'll pass in a string that is identical 52 00:02:12,840 --> 00:02:14,190 to the text that we just entered 53 00:02:14,190 --> 00:02:16,710 over here inside the app component. 54 00:02:16,710 --> 00:02:19,110 So I'll pass in a string that says Hi there 55 00:02:19,110 --> 00:02:22,380 completely identical to what we were just looking at. 56 00:02:22,380 --> 00:02:24,510 I'll then save this file and then I'm gonna flip over 57 00:02:24,510 --> 00:02:26,810 to the terminal and try to run this test file 58 00:02:26,810 --> 00:02:29,160 that should be validating to make sure 59 00:02:29,160 --> 00:02:32,150 that the app component is working the way we expect. 60 00:02:32,150 --> 00:02:33,900 So I will change back over 61 00:02:33,900 --> 00:02:37,200 to my terminal and then inside the testing directory 62 00:02:37,200 --> 00:02:41,430 I'm going to execute the command NPM run test. 63 00:02:41,430 --> 00:02:44,970 So when we first generate a project using Create React app 64 00:02:44,970 --> 00:02:48,360 we automatically get a fully functional test setup right 65 00:02:48,360 --> 00:02:50,250 out of the box ready to go. 66 00:02:50,250 --> 00:02:53,100 So we do not have to install any additional libraries 67 00:02:53,100 --> 00:02:56,010 any additional dependencies or do any additional setup. 68 00:02:56,010 --> 00:02:59,010 We can just immediately start writing tests. 69 00:02:59,010 --> 00:02:59,843 -: Now we'll talk a lot 70 00:02:59,843 --> 00:03:02,670 about this setup that comes included or bundled 71 00:03:02,670 --> 00:03:05,610 along with a Crate React app generated application, but 72 00:03:05,610 --> 00:03:08,910 for right now, it's definitely a good place to get started. 73 00:03:08,910 --> 00:03:10,680 Now after running NPM run test 74 00:03:10,680 --> 00:03:12,750 we're gonna wait just a moment for the test to run 75 00:03:12,750 --> 00:03:15,150 and then eventually we're gonna see a message that says 76 00:03:15,150 --> 00:03:16,710 Yep, it looks like your component 77 00:03:16,710 --> 00:03:20,280 or that app component is working the way you expect. 78 00:03:20,280 --> 00:03:21,133 So in short 79 00:03:21,133 --> 00:03:24,300 after we attempted to render that component inside 80 00:03:24,300 --> 00:03:27,630 of a sort of test environment, we then check to make sure 81 00:03:27,630 --> 00:03:31,053 that the component itself contains the text high there. 82 00:03:32,040 --> 00:03:33,900 And because the test passed well 83 00:03:33,900 --> 00:03:35,820 I feel reasonably confident that, yep 84 00:03:35,820 --> 00:03:38,490 that component is working the way we expect. 85 00:03:38,490 --> 00:03:40,080 All right, so that's our first test. 86 00:03:40,080 --> 00:03:42,450 Just a very easy place to get started. 87 00:03:42,450 --> 00:03:43,950 Let's take a quick pause right here 88 00:03:43,950 --> 00:03:45,300 and we'll come back to the next section 89 00:03:45,300 --> 00:03:47,970 and start talking about the test environment that we get 90 00:03:47,970 --> 00:03:49,833 for free with Create React App.