- So the examples we've seen so far in this lesson
we've used CommonJs modules
as a way of organizing our scripts.
And it looks like this,
and in our code that we want to test,
we define functions and we use this syntax.
This is the CommonJs syntax
which is used by no js
to export functions and objects and so on.
So module.export, that's the way you export a name
from this file, from this module,
and then if you want to import it into another module,
like the test file, you'd use this syntax.
You'd say you call it require function,
you'd specify the name of the file,
so example.js,
it would import this name,
and you give it a name down here.
Okay, so this is how you import
something that you've exported from there.
This is the way that no JS managers models,
or script files, it exports symbols from one file,
and this is how you import symbols from another.
Okay, so that's no JS, that's the no JS model mechanism.
If you are writing client-side JavaScript for a browser,
you'll probably use a different way to organize modules
rather than using common JS module structure,
with the module exports and a required function,
there's a different way in ECMAScript.
ECMAScript is kind of the client-side standard JavaScript,
and it has a different syntax for exporting symbols
from one module and importing in another.
So if you're writing client-side JavaScript,
you tend to write code that looks more like this, okay.
Instead of having to module.exports
definition at the end of your file,
you will export functions like this.
So then there's an export keyword,
which effectively means public.
It means that this function
can be imported in another module.
So we're gonna take this approach in this section.
We're gonna see how in ECMAScript, you can export functions
from one file and then import them in another.
So if I've exported the ad function from this file,
I can import it in another file, such as my test harness.
So in my test file here, I've imported the ad function
from, example, it assumes example.js.
It kind of knows that we're talking
about the doc JS file here.
So, from that file in the current folder import the symbol
that was exported there, okay.
This is quite straightforward
this is how you make something public,
and this is how you access it in another file.
So, I've got these examples, as you can see,
in the example three folder, let's have a look.
This is lesson one, example three,
and we have the code file and the test file,
plus some configuration that you need
to also specify to make this work.
I'll show you that in a moment.
I'll open this folder in the code editor to take a look.
Okay, so here's my VS code window.
And my code I want to test, super isn't it.
There's my ad function.
I've exported the ad function in my test file.
I have imported the ad function,
and then I can test it here.
Okay. So that's all looking good so far.
There is some configuration that you need to specify.
In order for Jest, Jest by default assumes
that you're using the other technique
for exporting and importing,
like we've been seen in the rest of this lesson.
In other words, common JS modules.
If you want to support ECMAScript modules,
you have to give Jest a bit of a helping hand.
You have to have a package adjacent file
which specifies a couple
of additional tools that you need to install
on your development machine.
So in your packaged adjacent file,
you need to specify a couple of dev dependencies
relating to Babel.
So I'm not sure how much you've worked with Babel.
It's an amazing tool.
Babel is a transpiler, and it does a whole load of things.
One of the things that does, for example,
is to transpire type-script into JavaScript.
If you've done react development,
Babel is also capable of converting
JSX or TSX files into pure JavaScript.
It's also capable of compiling
what I would call modern JavaScript.
So, JavaScript has been on a journey
for the last five or six years.
Classic JavaScript,
traditional JavaScript is ECMAScript five,
and all browsers understand ECMAScript five,
but over the last five or six years,
ECMAScript six and seven and eight and nine and ten
have emerged with progressively useful language features,
like lamdas, classes, various other features as well.
The thing is, if you're using those
new language features in your code,
but if the user has an old browser,
the old browser won't understand the modern
ECMAScript syntax.
So what Babel can do, Babel can compile or transpire
your modern laminate features like lamdas
into ECMAScript five syntax,
which is ECMAScript five is kind of like the baseline,
the lowest common denominator for classic JavaScript.
All browsers understand ECMAScript five.
Okay, so by installing these devDependencies here,
I am enabling support for,
I'm basically telling it how to work with common,
so with ECMAScript modules.
Right, that's my package.json file.
Here it is.
Okay, so that's as per the PowerPoint,
you need to install these dependencies on your machine.
So you need to either do a yarn install
or an NPM install to download
these Dependencies, these libraries
into your local folder where your test code lives.
So let's do that now.
Here's a command window for my example folder:
npm install.
So NPM install, it consults the package adjacent file
and sees what dependencies we have or their dependencies,
and it downloads them into my local folder.
It takes a few moments to get that done.
When that's finished, in the local folder,
we'll have a node modules sub directory
that contains the development dependencies
that we specified.
Okay, so basically it'll contain the Babel trans Bylar,
which will enable Jest
to understand the ECMAScript import mechanism.
Okay, so that takes a little while to finish.
I'm gonna leave that carry on.
Life's too short to wait.
We'll assume that that's gonna finish in a moment.
While we're waiting,
let's go back into the slides and see what happens next.
So we have started the install process
for these dependencies.
Hopefully, that will finish soon.
There is one other thing that you need to have.
You need to basically configure Babel like this.
You have a babel.config.json file.
There's quite a lot of detail involved here,
and I don't wanna get sidetracked.
If you are really curious about how this works,
Babel, I mean it's quite a large complex area, to be honest,
and it's a bit dry as well.
It is quite very powerful,
but also quite specific.
Long story short,
we've configured Babel here with a preset.
And by default, what this preset does is to convert our code
into ECMAScript five.
Okay, which is kind of classic old JavaScript
that every browser will understand.
Okay, so that is a necessary configuration file
to allow you to use ECMAScript model mechanisms.
I've got that file in my demo folder as well.
Okay, so here it is, babel.config.json,
and if you wanna have a look at it in the editor,
here it is.
So, you know, as per the PowerPoint,
I'm basically configuring Babel
so that it will transpire my code
into ECMAScript five by default,
that will enable it to cope with the module syntax,
the ECMAScript module syntax.
So we're good to go now.
We've configured.
Well, first of all, we downloaded the Babel tool set.
That's what this does.
And then we've configured Babel so that it knows
that it has to convert our code into ECMAScript five.
So we should be ready to actually build,
sort of run our tests.
So Babel will be compiling our code into ECMAScript.
ECMAScript 2015 is kind of classic JavaScript.
Okay, that's the old version of JavaScript.
Every browser understands that.
So we can just run our tests,
npm run test or yarn test.
Let's give that a try.
So my install has finished, already.
Now, npm test, npm run test.
(keyboard clicking)
Okay, so it'll run the test.
My test imports the ad function
using the ECMAScript import mechanism
and finds the ad function, tests it, and hopefully succeeds.
The excitement is almost too much.
There we go.
It took a while to finish, didn't it?
But it did succeed.
Okay, so there we go.
So just to summarize,
when you're writing client-side JavaScript
you are typically export functions
and import them using the ECMAScript syntax.
So exporting functions using the ECMAScript syntax,
importing functions also using the ECMAScript import syntax.
For that to work, you have to install the Babel dependencies
and then you have to configure Babel
so that it knows that it has to be involved in the process.
Once you've done that, then you're good to go.