1 00:00:06,654 --> 00:00:09,442 - In this section, we're going to see how to start testing 2 00:00:09,442 --> 00:00:11,251 a React application. 3 00:00:11,251 --> 00:00:12,821 We're gonna test an application 4 00:00:12,821 --> 00:00:15,638 that was generated using the Create React App tool. 5 00:00:15,638 --> 00:00:17,040 So as you can see here, 6 00:00:17,040 --> 00:00:19,971 I've created an application called demo app, 7 00:00:19,971 --> 00:00:21,984 and it's going to be in type script. 8 00:00:21,984 --> 00:00:24,005 So the application already exists, 9 00:00:24,005 --> 00:00:26,162 and we can have a look at it in example four. 10 00:00:26,162 --> 00:00:27,733 So let's have a quick look at the application 11 00:00:27,733 --> 00:00:30,086 before we see the tests. 12 00:00:30,086 --> 00:00:31,486 Okay. So here it is. 13 00:00:31,486 --> 00:00:33,495 In the example four folder, 14 00:00:33,495 --> 00:00:36,839 it's the same application as we've been looking at earlier. 15 00:00:36,839 --> 00:00:41,415 So it has a public folder, with an index HTML. 16 00:00:41,415 --> 00:00:43,978 And the index HTML has a div here, 17 00:00:43,978 --> 00:00:47,442 into which our React content will be rendered. 18 00:00:47,442 --> 00:00:51,159 By the way, I've already done an NPM install. 19 00:00:51,159 --> 00:00:53,624 So the node lie (indistinct) have been installed there. 20 00:00:53,624 --> 00:00:55,912 So that's important, obviously. 21 00:00:55,912 --> 00:00:57,640 And then in the source folder, 22 00:00:57,640 --> 00:00:58,704 there are various files here 23 00:00:58,704 --> 00:01:00,445 that we're going to take a look at. 24 00:01:00,445 --> 00:01:02,765 I'm gonna concentrate on, in particular, 25 00:01:02,765 --> 00:01:04,430 the app test TX. 26 00:01:04,430 --> 00:01:07,154 That was actually generated automatically for me 27 00:01:07,154 --> 00:01:09,121 by the Create React App tool, 28 00:01:09,121 --> 00:01:10,493 as a good starting point. 29 00:01:10,493 --> 00:01:12,756 So what we're going to look at is the code 30 00:01:12,756 --> 00:01:14,857 that's actually generated by default, 31 00:01:14,857 --> 00:01:16,766 before we start embellishing. 32 00:01:16,766 --> 00:01:19,224 I'm also gonna have a look at package dot json 33 00:01:19,224 --> 00:01:21,419 because we need to think about what libraries are involved 34 00:01:21,419 --> 00:01:24,079 in all this testing business. 35 00:01:24,079 --> 00:01:24,912 Okay. 36 00:01:24,912 --> 00:01:26,658 So first of all, in this package dot json, 37 00:01:26,658 --> 00:01:29,623 the Create React App tool generates this file, 38 00:01:29,623 --> 00:01:31,283 and it downloads these libraries. 39 00:01:31,283 --> 00:01:34,522 So there are several testing libraries, here. 40 00:01:34,522 --> 00:01:37,452 As you can see, we have jest-dom. 41 00:01:37,452 --> 00:01:41,082 Jest-dom is a wrapper over the testing library 42 00:01:41,082 --> 00:01:45,335 to make it easier for us to verify the content of elements. 43 00:01:45,335 --> 00:01:47,732 So it has matches that allow us to say, 44 00:01:47,732 --> 00:01:50,380 does this element have this HTML content? 45 00:01:50,380 --> 00:01:54,135 Does our element have a certain CSS style? 46 00:01:54,135 --> 00:01:57,210 Does our element have the keyboard focus? 47 00:01:57,210 --> 00:01:59,584 So it's a high-level set of matches 48 00:01:59,584 --> 00:02:01,539 which allow us to check the content 49 00:02:01,539 --> 00:02:04,042 in our React application. 50 00:02:04,042 --> 00:02:06,010 There's also a library we haven't seen before. 51 00:02:06,010 --> 00:02:07,928 Testing-library/react. 52 00:02:07,928 --> 00:02:10,671 That has some react specific extensions 53 00:02:10,671 --> 00:02:12,140 on top of testing-library. 54 00:02:12,140 --> 00:02:14,703 We'll have a look at that in more detail in the next lesson. 55 00:02:14,703 --> 00:02:17,983 And then also testing-library/user-event. 56 00:02:17,983 --> 00:02:19,439 We've seen that before. 57 00:02:19,439 --> 00:02:21,499 This enables us to, or makes it easier, 58 00:02:21,499 --> 00:02:23,814 for us to emulate user events. 59 00:02:23,814 --> 00:02:26,695 So using the user event library, we can say, 60 00:02:26,695 --> 00:02:30,730 take this button and simulate the user click in it, 61 00:02:30,730 --> 00:02:33,221 so that we can test the event handler. 62 00:02:33,221 --> 00:02:35,826 And also, because we are using type script, 63 00:02:35,826 --> 00:02:38,202 type script is quite fussy. 64 00:02:38,202 --> 00:02:40,431 It needs to know what data types everything are. 65 00:02:40,431 --> 00:02:41,770 So there are, 66 00:02:41,770 --> 00:02:45,202 there's the need for additional interface definitions, 67 00:02:45,202 --> 00:02:47,919 an enum to keep type script happy. 68 00:02:47,919 --> 00:02:49,542 And that's what's defined in this library. 69 00:02:49,542 --> 00:02:51,239 It's a set of type definitions, 70 00:02:51,239 --> 00:02:54,495 type script, type definitions for the jest library, 71 00:02:54,495 --> 00:02:58,711 so that when type script compiler sees our code, it's happy. 72 00:02:58,711 --> 00:02:59,544 Okay. 73 00:02:59,544 --> 00:03:02,167 There's also a script section 74 00:03:02,167 --> 00:03:05,222 in package dot json to run our tests. 75 00:03:05,222 --> 00:03:07,889 Okay. So we can say Yarn or NPM. 76 00:03:10,655 --> 00:03:12,636 We can run this script, 77 00:03:12,636 --> 00:03:16,119 and it's just a shorthand to running React scripts test. 78 00:03:16,119 --> 00:03:18,991 You can either say, you can either run this script, 79 00:03:18,991 --> 00:03:20,154 or you can run this script. 80 00:03:20,154 --> 00:03:22,387 They're kind of euphemisms for each other. 81 00:03:22,387 --> 00:03:25,042 In case all of that is in the package json file, 82 00:03:25,042 --> 00:03:27,008 let's just take a quick look. 83 00:03:27,008 --> 00:03:29,962 So here is my package json file. 84 00:03:29,962 --> 00:03:33,311 And as you can see, it has the testing dependencies 85 00:03:33,311 --> 00:03:37,677 that I just talked about, including the type definitions. 86 00:03:37,677 --> 00:03:39,593 And then it has a start script. 87 00:03:39,593 --> 00:03:44,284 So it has a test script which helps us to test our code. 88 00:03:44,284 --> 00:03:46,212 So good so far. 89 00:03:46,212 --> 00:03:47,045 Right. 90 00:03:47,045 --> 00:03:48,863 So the jest-dom package, as I mentioned, 91 00:03:48,863 --> 00:03:51,816 it contains Jest matchers, makes it easier 92 00:03:51,816 --> 00:03:55,328 for us to verify the content and our downloads. 93 00:03:55,328 --> 00:03:57,264 So we can say, find an element 94 00:03:57,264 --> 00:04:00,912 and expect it to have some high level DOM test. 95 00:04:00,912 --> 00:04:05,200 Does it have this tech text content inside the element? 96 00:04:05,200 --> 00:04:08,736 Okay. And then jest-dom, the jest-dom library. 97 00:04:08,736 --> 00:04:11,403 This is imported into our tests. 98 00:04:13,188 --> 00:04:18,188 We have a standard import in our source setup test folder. 99 00:04:18,258 --> 00:04:20,995 It imports this library everywhere. 100 00:04:20,995 --> 00:04:23,520 Okay. So that means that we have access. 101 00:04:23,520 --> 00:04:27,289 Any of our tests have access to the jest-dom library. 102 00:04:27,289 --> 00:04:31,742 So we can use functions like this, anywhere in our code. 103 00:04:31,742 --> 00:04:32,575 All right. 104 00:04:32,575 --> 00:04:33,408 So let's have a look at how 105 00:04:33,408 --> 00:04:35,947 to actually write tests in React. 106 00:04:35,947 --> 00:04:40,947 It's commonplace to have a separate test file per component. 107 00:04:41,199 --> 00:04:42,201 So in our application, 108 00:04:42,201 --> 00:04:44,277 because it's such a simple application, at the moment, 109 00:04:44,277 --> 00:04:47,574 it has a single component app TSX 110 00:04:47,574 --> 00:04:51,381 and generated for us by the Create React app tool, 111 00:04:51,381 --> 00:04:55,236 is a correspondent test file app dot test dot TSX. 112 00:04:55,236 --> 00:04:58,080 That's the naming convention that we follow. 113 00:04:58,080 --> 00:05:02,321 So we'll have a look at the tests in app test TSX. 114 00:05:02,321 --> 00:05:04,983 So remember this, what we're gonna look at here is the code 115 00:05:04,983 --> 00:05:07,259 that was actually generated for us automatically 116 00:05:07,259 --> 00:05:08,774 by the tool. 117 00:05:08,774 --> 00:05:13,251 Okay. So just to confirm, there's my actual component. 118 00:05:13,251 --> 00:05:15,918 The component renders some HTML, 119 00:05:16,873 --> 00:05:19,073 it's relatively simple HTML. 120 00:05:19,073 --> 00:05:21,347 Notice, in particular, 121 00:05:21,347 --> 00:05:23,153 because we're gonna test this in a moment. 122 00:05:23,153 --> 00:05:27,739 Notice that the HTML, in the HTML, amongst other things, 123 00:05:27,739 --> 00:05:29,406 there's a hyperlink, 124 00:05:30,442 --> 00:05:32,481 hyperlink with some certain attributes, 125 00:05:32,481 --> 00:05:34,573 and a Learn React text. 126 00:05:34,573 --> 00:05:35,406 Okay. 127 00:05:35,406 --> 00:05:37,465 So bear that in mind, because in a moment, 128 00:05:37,465 --> 00:05:41,575 we're gonna see a test that verifies this element exists. 129 00:05:41,575 --> 00:05:42,992 The test is here. 130 00:05:44,117 --> 00:05:45,615 Okay. So it's quite straightforward. 131 00:05:45,615 --> 00:05:48,208 Let's take a look at the code that we have in here. 132 00:05:48,208 --> 00:05:50,823 First of all, there's a render function. 133 00:05:50,823 --> 00:05:54,951 The render function is provided by test and library React. 134 00:05:54,951 --> 00:05:55,784 Okay. 135 00:05:55,784 --> 00:05:57,191 And what it does is it renders, 136 00:05:57,191 --> 00:06:01,024 it's a bit like the React DOM render function. 137 00:06:02,059 --> 00:06:03,935 When you, in a real application, 138 00:06:03,935 --> 00:06:05,745 when you say React DOM render, 139 00:06:05,745 --> 00:06:09,271 it renders a component onto the browser. 140 00:06:09,271 --> 00:06:11,383 But when you call the render function here, 141 00:06:11,383 --> 00:06:12,495 the render function, 142 00:06:12,495 --> 00:06:16,293 it renders a component into a virtual webpage. 143 00:06:16,293 --> 00:06:19,555 And that virtual webpage is provided by screen. 144 00:06:19,555 --> 00:06:21,983 Okay, well, it's actually provided by JS DOM, 145 00:06:21,983 --> 00:06:24,919 but the the render function is going 146 00:06:24,919 --> 00:06:26,871 to render this component. 147 00:06:26,871 --> 00:06:29,180 In other words, as if it was a real webpage, 148 00:06:29,180 --> 00:06:31,399 but it won't render it on a webpage. 149 00:06:31,399 --> 00:06:35,148 It'll render it into a virtual webpage. 150 00:06:35,148 --> 00:06:38,108 And the screen object gives us access 151 00:06:38,108 --> 00:06:41,388 to the document body in that virtual webpage. 152 00:06:41,388 --> 00:06:42,671 So that's great, isn't it? 153 00:06:42,671 --> 00:06:45,174 The render function will rent the content 154 00:06:45,174 --> 00:06:46,926 into a virtual webpage. 155 00:06:46,926 --> 00:06:50,555 The screen object gives us access to that virtual webpage, 156 00:06:50,555 --> 00:06:53,234 in particular, to the body part of it. 157 00:06:53,234 --> 00:06:56,905 So we can say, in the body of my virtual webpage, 158 00:06:56,905 --> 00:07:01,850 does it, somewhere, have an element that contains this text? 159 00:07:01,850 --> 00:07:03,441 Remember JS DOM? 160 00:07:03,441 --> 00:07:06,929 With JS DOM, you have a high level functions. 161 00:07:06,929 --> 00:07:09,271 You don't search for elements by ID, 162 00:07:09,271 --> 00:07:11,410 you search for elements to have a text content 163 00:07:11,410 --> 00:07:13,221 as the user would see. 164 00:07:13,221 --> 00:07:17,541 Find an element that has this display text, learn react. 165 00:07:17,541 --> 00:07:19,283 Well, that should be the hyperlink. 166 00:07:19,283 --> 00:07:21,993 Hopefully, that will give us back the hyperlink. 167 00:07:21,993 --> 00:07:25,156 So let's verify that the hyperlink is in the document. 168 00:07:25,156 --> 00:07:25,989 Okay. 169 00:07:25,989 --> 00:07:28,687 So let's verify that in the document somewhere, 170 00:07:28,687 --> 00:07:31,797 it contains an element that has that text. 171 00:07:31,797 --> 00:07:35,274 So hopefully, in my application component, 172 00:07:35,274 --> 00:07:39,036 it's this hyperlink here that has that text. 173 00:07:39,036 --> 00:07:42,119 It's this hyperlink that we've just gotten 174 00:07:42,119 --> 00:07:45,202 and tested for to see that it exists. 175 00:07:46,473 --> 00:07:50,052 So you call the render function to render the content. 176 00:07:50,052 --> 00:07:52,423 You call the, you use the screen object 177 00:07:52,423 --> 00:07:55,649 to access the content that has been rendered. 178 00:07:55,649 --> 00:07:58,223 So you can check that it's correct. 179 00:07:58,223 --> 00:07:59,877 All we need to do now is to see 180 00:07:59,877 --> 00:08:01,318 how to actually run the test. 181 00:08:01,318 --> 00:08:05,883 So you can just say Yarn test, or you can say NPM test, 182 00:08:05,883 --> 00:08:08,971 or you can run the React test manually. 183 00:08:08,971 --> 00:08:11,371 And this is what it displays. 184 00:08:11,371 --> 00:08:14,261 It displays kind of like a menu of options. 185 00:08:14,261 --> 00:08:17,683 So you can see 'em in the right folder here. 186 00:08:17,683 --> 00:08:21,731 You can run the a option to run all tests. 187 00:08:21,731 --> 00:08:24,926 And if you do that, then it runs all the tests, 188 00:08:24,926 --> 00:08:26,427 and they pass. 189 00:08:26,427 --> 00:08:27,871 I'm gonna actually do that interactively, 190 00:08:27,871 --> 00:08:30,694 so you can see what it actually looks like when you do it. 191 00:08:30,694 --> 00:08:32,168 So here's a command window. 192 00:08:32,168 --> 00:08:34,907 I've opened the command window in the correct location, 193 00:08:34,907 --> 00:08:35,958 and correct folder. 194 00:08:35,958 --> 00:08:38,176 So I can just say, as here, 195 00:08:38,176 --> 00:08:40,424 you can just say Yarn test. 196 00:08:40,424 --> 00:08:41,257 Yarn test. 197 00:08:44,243 --> 00:08:48,563 So it's equivalent to just running React scripts test. 198 00:08:48,563 --> 00:08:49,980 And it'll locate. 199 00:08:50,867 --> 00:08:52,385 Basically what it does by default, 200 00:08:52,385 --> 00:08:56,334 is it locates all the files that have test file name, 201 00:08:56,334 --> 00:08:57,834 like app test TSX. 202 00:08:59,230 --> 00:09:00,502 It'll find all those files. 203 00:09:00,502 --> 00:09:01,931 If I run the a option. 204 00:09:01,931 --> 00:09:02,882 A. 205 00:09:02,882 --> 00:09:04,606 It ran all the tests. 206 00:09:04,606 --> 00:09:08,235 I wouldn't got one test and it worked. 207 00:09:08,235 --> 00:09:09,318 It will work. 208 00:09:11,583 --> 00:09:13,656 Seems to be thinking whether it's working clearly, 209 00:09:13,656 --> 00:09:15,224 it's such a complicated test. 210 00:09:15,224 --> 00:09:17,848 It's contemplating whether it's gonna work or not. 211 00:09:17,848 --> 00:09:19,358 That will work eventually. 212 00:09:19,358 --> 00:09:21,523 And then it'll display another option to say, 213 00:09:21,523 --> 00:09:22,939 what do you wanna do next? 214 00:09:22,939 --> 00:09:27,293 So if I press w, I get an option again here to say, 215 00:09:27,293 --> 00:09:31,118 maybe I want to run the tests that failed 216 00:09:31,118 --> 00:09:32,585 or other options as well. 217 00:09:32,585 --> 00:09:35,835 I'm gonna quit now because we're done.