1 00:00:06,510 --> 00:00:10,170 - So the examples we've seen so far in this lesson 2 00:00:10,170 --> 00:00:12,510 we've used CommonJs modules 3 00:00:12,510 --> 00:00:15,000 as a way of organizing our scripts. 4 00:00:15,000 --> 00:00:16,890 And it looks like this, 5 00:00:16,890 --> 00:00:20,520 and in our code that we want to test, 6 00:00:20,520 --> 00:00:23,520 we define functions and we use this syntax. 7 00:00:23,520 --> 00:00:26,130 This is the CommonJs syntax 8 00:00:26,130 --> 00:00:28,290 which is used by no js 9 00:00:28,290 --> 00:00:32,190 to export functions and objects and so on. 10 00:00:32,190 --> 00:00:35,670 So module.export, that's the way you export a name 11 00:00:35,670 --> 00:00:37,530 from this file, from this module, 12 00:00:37,530 --> 00:00:40,380 and then if you want to import it into another module, 13 00:00:40,380 --> 00:00:42,810 like the test file, you'd use this syntax. 14 00:00:42,810 --> 00:00:45,030 You'd say you call it require function, 15 00:00:45,030 --> 00:00:46,770 you'd specify the name of the file, 16 00:00:46,770 --> 00:00:48,453 so example.js, 17 00:00:49,380 --> 00:00:52,800 it would import this name, 18 00:00:52,800 --> 00:00:54,030 and you give it a name down here. 19 00:00:54,030 --> 00:00:56,640 Okay, so this is how you import 20 00:00:56,640 --> 00:00:59,100 something that you've exported from there. 21 00:00:59,100 --> 00:01:02,190 This is the way that no JS managers models, 22 00:01:02,190 --> 00:01:06,060 or script files, it exports symbols from one file, 23 00:01:06,060 --> 00:01:08,763 and this is how you import symbols from another. 24 00:01:09,630 --> 00:01:14,193 Okay, so that's no JS, that's the no JS model mechanism. 25 00:01:15,060 --> 00:01:19,440 If you are writing client-side JavaScript for a browser, 26 00:01:19,440 --> 00:01:22,200 you'll probably use a different way to organize modules 27 00:01:22,200 --> 00:01:25,200 rather than using common JS module structure, 28 00:01:25,200 --> 00:01:27,990 with the module exports and a required function, 29 00:01:27,990 --> 00:01:30,103 there's a different way in ECMAScript. 30 00:01:30,103 --> 00:01:34,830 ECMAScript is kind of the client-side standard JavaScript, 31 00:01:34,830 --> 00:01:38,430 and it has a different syntax for exporting symbols 32 00:01:38,430 --> 00:01:41,430 from one module and importing in another. 33 00:01:41,430 --> 00:01:43,500 So if you're writing client-side JavaScript, 34 00:01:43,500 --> 00:01:47,070 you tend to write code that looks more like this, okay. 35 00:01:47,070 --> 00:01:49,030 Instead of having to module.exports 36 00:01:50,400 --> 00:01:52,140 definition at the end of your file, 37 00:01:52,140 --> 00:01:54,480 you will export functions like this. 38 00:01:54,480 --> 00:01:56,130 So then there's an export keyword, 39 00:01:56,130 --> 00:01:57,960 which effectively means public. 40 00:01:57,960 --> 00:01:59,430 It means that this function 41 00:01:59,430 --> 00:02:02,250 can be imported in another module. 42 00:02:02,250 --> 00:02:05,850 So we're gonna take this approach in this section. 43 00:02:05,850 --> 00:02:09,660 We're gonna see how in ECMAScript, you can export functions 44 00:02:09,660 --> 00:02:12,600 from one file and then import them in another. 45 00:02:12,600 --> 00:02:16,200 So if I've exported the ad function from this file, 46 00:02:16,200 --> 00:02:19,950 I can import it in another file, such as my test harness. 47 00:02:19,950 --> 00:02:24,070 So in my test file here, I've imported the ad function 48 00:02:25,350 --> 00:02:28,860 from, example, it assumes example.js. 49 00:02:28,860 --> 00:02:30,150 It kind of knows that we're talking 50 00:02:30,150 --> 00:02:32,250 about the doc JS file here. 51 00:02:32,250 --> 00:02:36,420 So, from that file in the current folder import the symbol 52 00:02:36,420 --> 00:02:38,070 that was exported there, okay. 53 00:02:38,070 --> 00:02:39,180 This is quite straightforward 54 00:02:39,180 --> 00:02:41,400 this is how you make something public, 55 00:02:41,400 --> 00:02:43,950 and this is how you access it in another file. 56 00:02:43,950 --> 00:02:46,380 So, I've got these examples, as you can see, 57 00:02:46,380 --> 00:02:49,230 in the example three folder, let's have a look. 58 00:02:49,230 --> 00:02:52,350 This is lesson one, example three, 59 00:02:52,350 --> 00:02:55,380 and we have the code file and the test file, 60 00:02:55,380 --> 00:02:58,050 plus some configuration that you need 61 00:02:58,050 --> 00:02:59,880 to also specify to make this work. 62 00:02:59,880 --> 00:03:01,830 I'll show you that in a moment. 63 00:03:01,830 --> 00:03:05,523 I'll open this folder in the code editor to take a look. 64 00:03:06,660 --> 00:03:09,480 Okay, so here's my VS code window. 65 00:03:09,480 --> 00:03:14,480 And my code I want to test, super isn't it. 66 00:03:14,640 --> 00:03:16,290 There's my ad function. 67 00:03:16,290 --> 00:03:19,473 I've exported the ad function in my test file. 68 00:03:20,370 --> 00:03:22,140 I have imported the ad function, 69 00:03:22,140 --> 00:03:24,330 and then I can test it here. 70 00:03:24,330 --> 00:03:27,690 Okay. So that's all looking good so far. 71 00:03:27,690 --> 00:03:30,150 There is some configuration that you need to specify. 72 00:03:30,150 --> 00:03:33,330 In order for Jest, Jest by default assumes 73 00:03:33,330 --> 00:03:35,070 that you're using the other technique 74 00:03:35,070 --> 00:03:36,810 for exporting and importing, 75 00:03:36,810 --> 00:03:39,690 like we've been seen in the rest of this lesson. 76 00:03:39,690 --> 00:03:41,760 In other words, common JS modules. 77 00:03:41,760 --> 00:03:44,010 If you want to support ECMAScript modules, 78 00:03:44,010 --> 00:03:47,220 you have to give Jest a bit of a helping hand. 79 00:03:47,220 --> 00:03:50,370 You have to have a package adjacent file 80 00:03:50,370 --> 00:03:51,780 which specifies a couple 81 00:03:51,780 --> 00:03:54,690 of additional tools that you need to install 82 00:03:54,690 --> 00:03:56,010 on your development machine. 83 00:03:56,010 --> 00:03:58,050 So in your packaged adjacent file, 84 00:03:58,050 --> 00:04:01,800 you need to specify a couple of dev dependencies 85 00:04:01,800 --> 00:04:03,720 relating to Babel. 86 00:04:03,720 --> 00:04:05,910 So I'm not sure how much you've worked with Babel. 87 00:04:05,910 --> 00:04:07,050 It's an amazing tool. 88 00:04:07,050 --> 00:04:11,370 Babel is a transpiler, and it does a whole load of things. 89 00:04:11,370 --> 00:04:13,020 One of the things that does, for example, 90 00:04:13,020 --> 00:04:15,903 is to transpire type-script into JavaScript. 91 00:04:16,800 --> 00:04:18,540 If you've done react development, 92 00:04:18,540 --> 00:04:21,000 Babel is also capable of converting 93 00:04:21,000 --> 00:04:25,260 JSX or TSX files into pure JavaScript. 94 00:04:25,260 --> 00:04:28,210 It's also capable of compiling 95 00:04:29,670 --> 00:04:31,410 what I would call modern JavaScript. 96 00:04:31,410 --> 00:04:33,810 So, JavaScript has been on a journey 97 00:04:33,810 --> 00:04:35,520 for the last five or six years. 98 00:04:35,520 --> 00:04:36,810 Classic JavaScript, 99 00:04:36,810 --> 00:04:39,870 traditional JavaScript is ECMAScript five, 100 00:04:39,870 --> 00:04:43,320 and all browsers understand ECMAScript five, 101 00:04:43,320 --> 00:04:45,570 but over the last five or six years, 102 00:04:45,570 --> 00:04:48,480 ECMAScript six and seven and eight and nine and ten 103 00:04:48,480 --> 00:04:52,890 have emerged with progressively useful language features, 104 00:04:52,890 --> 00:04:57,890 like lamdas, classes, various other features as well. 105 00:04:58,800 --> 00:05:00,990 The thing is, if you're using those 106 00:05:00,990 --> 00:05:02,970 new language features in your code, 107 00:05:02,970 --> 00:05:05,520 but if the user has an old browser, 108 00:05:05,520 --> 00:05:08,217 the old browser won't understand the modern 109 00:05:08,217 --> 00:05:09,420 ECMAScript syntax. 110 00:05:09,420 --> 00:05:14,220 So what Babel can do, Babel can compile or transpire 111 00:05:14,220 --> 00:05:16,890 your modern laminate features like lamdas 112 00:05:16,890 --> 00:05:19,950 into ECMAScript five syntax, 113 00:05:19,950 --> 00:05:22,020 which is ECMAScript five is kind of like the baseline, 114 00:05:22,020 --> 00:05:25,200 the lowest common denominator for classic JavaScript. 115 00:05:25,200 --> 00:05:28,470 All browsers understand ECMAScript five. 116 00:05:28,470 --> 00:05:32,640 Okay, so by installing these devDependencies here, 117 00:05:32,640 --> 00:05:34,680 I am enabling support for, 118 00:05:34,680 --> 00:05:36,870 I'm basically telling it how to work with common, 119 00:05:36,870 --> 00:05:39,480 so with ECMAScript modules. 120 00:05:39,480 --> 00:05:42,180 Right, that's my package.json file. 121 00:05:42,180 --> 00:05:43,560 Here it is. 122 00:05:43,560 --> 00:05:47,100 Okay, so that's as per the PowerPoint, 123 00:05:47,100 --> 00:05:51,723 you need to install these dependencies on your machine. 124 00:05:53,195 --> 00:05:54,510 So you need to either do a yarn install 125 00:05:54,510 --> 00:05:56,400 or an NPM install to download 126 00:05:56,400 --> 00:05:58,590 these Dependencies, these libraries 127 00:05:58,590 --> 00:06:02,460 into your local folder where your test code lives. 128 00:06:02,460 --> 00:06:04,200 So let's do that now. 129 00:06:04,200 --> 00:06:07,770 Here's a command window for my example folder: 130 00:06:07,770 --> 00:06:10,140 npm install. 131 00:06:10,140 --> 00:06:15,060 So NPM install, it consults the package adjacent file 132 00:06:15,060 --> 00:06:18,647 and sees what dependencies we have or their dependencies, 133 00:06:18,647 --> 00:06:21,600 and it downloads them into my local folder. 134 00:06:21,600 --> 00:06:24,180 It takes a few moments to get that done. 135 00:06:24,180 --> 00:06:26,520 When that's finished, in the local folder, 136 00:06:26,520 --> 00:06:29,040 we'll have a node modules sub directory 137 00:06:29,040 --> 00:06:31,350 that contains the development dependencies 138 00:06:31,350 --> 00:06:32,400 that we specified. 139 00:06:32,400 --> 00:06:35,820 Okay, so basically it'll contain the Babel trans Bylar, 140 00:06:35,820 --> 00:06:37,950 which will enable Jest 141 00:06:37,950 --> 00:06:41,580 to understand the ECMAScript import mechanism. 142 00:06:41,580 --> 00:06:44,310 Okay, so that takes a little while to finish. 143 00:06:44,310 --> 00:06:46,320 I'm gonna leave that carry on. 144 00:06:46,320 --> 00:06:47,610 Life's too short to wait. 145 00:06:47,610 --> 00:06:50,160 We'll assume that that's gonna finish in a moment. 146 00:06:50,160 --> 00:06:51,480 While we're waiting, 147 00:06:51,480 --> 00:06:54,090 let's go back into the slides and see what happens next. 148 00:06:54,090 --> 00:06:58,320 So we have started the install process 149 00:06:58,320 --> 00:06:59,580 for these dependencies. 150 00:06:59,580 --> 00:07:01,290 Hopefully, that will finish soon. 151 00:07:01,290 --> 00:07:03,780 There is one other thing that you need to have. 152 00:07:03,780 --> 00:07:08,133 You need to basically configure Babel like this. 153 00:07:09,480 --> 00:07:12,780 You have a babel.config.json file. 154 00:07:12,780 --> 00:07:15,000 There's quite a lot of detail involved here, 155 00:07:15,000 --> 00:07:17,160 and I don't wanna get sidetracked. 156 00:07:17,160 --> 00:07:19,800 If you are really curious about how this works, 157 00:07:19,800 --> 00:07:24,800 Babel, I mean it's quite a large complex area, to be honest, 158 00:07:25,381 --> 00:07:28,200 and it's a bit dry as well. 159 00:07:28,200 --> 00:07:30,510 It is quite very powerful, 160 00:07:30,510 --> 00:07:32,193 but also quite specific. 161 00:07:33,060 --> 00:07:34,680 Long story short, 162 00:07:34,680 --> 00:07:38,310 we've configured Babel here with a preset. 163 00:07:38,310 --> 00:07:43,310 And by default, what this preset does is to convert our code 164 00:07:43,560 --> 00:07:45,960 into ECMAScript five. 165 00:07:45,960 --> 00:07:49,500 Okay, which is kind of classic old JavaScript 166 00:07:49,500 --> 00:07:51,990 that every browser will understand. 167 00:07:51,990 --> 00:07:56,760 Okay, so that is a necessary configuration file 168 00:07:56,760 --> 00:08:01,260 to allow you to use ECMAScript model mechanisms. 169 00:08:01,260 --> 00:08:04,230 I've got that file in my demo folder as well. 170 00:08:04,230 --> 00:08:08,820 Okay, so here it is, babel.config.json, 171 00:08:08,820 --> 00:08:11,270 and if you wanna have a look at it in the editor, 172 00:08:12,600 --> 00:08:13,433 here it is. 173 00:08:13,433 --> 00:08:15,030 So, you know, as per the PowerPoint, 174 00:08:15,030 --> 00:08:16,740 I'm basically configuring Babel 175 00:08:16,740 --> 00:08:19,170 so that it will transpire my code 176 00:08:19,170 --> 00:08:21,243 into ECMAScript five by default, 177 00:08:22,320 --> 00:08:25,830 that will enable it to cope with the module syntax, 178 00:08:25,830 --> 00:08:28,230 the ECMAScript module syntax. 179 00:08:28,230 --> 00:08:29,880 So we're good to go now. 180 00:08:29,880 --> 00:08:30,810 We've configured. 181 00:08:30,810 --> 00:08:34,830 Well, first of all, we downloaded the Babel tool set. 182 00:08:34,830 --> 00:08:36,750 That's what this does. 183 00:08:36,750 --> 00:08:39,690 And then we've configured Babel so that it knows 184 00:08:39,690 --> 00:08:42,810 that it has to convert our code into ECMAScript five. 185 00:08:42,810 --> 00:08:47,310 So we should be ready to actually build, 186 00:08:47,310 --> 00:08:49,620 sort of run our tests. 187 00:08:49,620 --> 00:08:53,382 So Babel will be compiling our code into ECMAScript. 188 00:08:53,382 --> 00:08:57,480 ECMAScript 2015 is kind of classic JavaScript. 189 00:08:57,480 --> 00:08:59,670 Okay, that's the old version of JavaScript. 190 00:08:59,670 --> 00:09:02,250 Every browser understands that. 191 00:09:02,250 --> 00:09:04,350 So we can just run our tests, 192 00:09:04,350 --> 00:09:07,470 npm run test or yarn test. 193 00:09:07,470 --> 00:09:08,700 Let's give that a try. 194 00:09:08,700 --> 00:09:11,970 So my install has finished, already. 195 00:09:11,970 --> 00:09:15,570 Now, npm test, npm run test. 196 00:09:15,570 --> 00:09:17,880 (keyboard clicking) 197 00:09:17,880 --> 00:09:19,620 Okay, so it'll run the test. 198 00:09:19,620 --> 00:09:22,020 My test imports the ad function 199 00:09:22,020 --> 00:09:24,570 using the ECMAScript import mechanism 200 00:09:24,570 --> 00:09:29,570 and finds the ad function, tests it, and hopefully succeeds. 201 00:09:31,860 --> 00:09:34,110 The excitement is almost too much. 202 00:09:34,110 --> 00:09:34,943 There we go. 203 00:09:34,943 --> 00:09:36,810 It took a while to finish, didn't it? 204 00:09:36,810 --> 00:09:38,100 But it did succeed. 205 00:09:38,100 --> 00:09:39,240 Okay, so there we go. 206 00:09:39,240 --> 00:09:41,100 So just to summarize, 207 00:09:41,100 --> 00:09:43,830 when you're writing client-side JavaScript 208 00:09:43,830 --> 00:09:46,710 you are typically export functions 209 00:09:46,710 --> 00:09:49,920 and import them using the ECMAScript syntax. 210 00:09:49,920 --> 00:09:54,270 So exporting functions using the ECMAScript syntax, 211 00:09:54,270 --> 00:09:59,267 importing functions also using the ECMAScript import syntax. 212 00:10:00,150 --> 00:10:05,140 For that to work, you have to install the Babel dependencies 213 00:10:06,090 --> 00:10:07,770 and then you have to configure Babel 214 00:10:07,770 --> 00:10:10,920 so that it knows that it has to be involved in the process. 215 00:10:10,920 --> 00:10:13,220 Once you've done that, then you're good to go.