- [Philippe] Hello, and welcome to
this new Developer Quick Takes episode.
My name is Philippe Ozil.
I'm a Developer Evangelist at Salesforce,
and today I'm gonna present how you can enable
Jest Code Coverage Overlay in Visual Studio Code.
Before I jump into the specifics
of the installation instructions,
I want to remind you what Jest is.
Jest is a JavaScript testing framework.
And we use Jest with a plugin
to test Lightning Web Components.
Now there are two things
that make this installation a bit more trickier
than it should be.
First we need to configure the usage of the plugin.
And secondly, we also need to use an Alpha version
of the overlay as of July 2020.
Normally you would install the Jest extension directly
from the VS Code marketplace,
but since we need an Alpha version
we need to go to the project homepage on GitHub.
And you can see here it's vscode-jest.
Now on this page, we have several releases
and the latest stable release at time of recording
this video, which is end of July 2020, is version 3.2.0.
But this is not what we need.
We need to go into the other releases
and we need to pick version four.
Currently the only version four that is available
is an Alpha version but that's perfectly fine.
It's stable enough that we can use it.
So how do we install this Alpha version?
The Alpha version is not yet on the marketplace
but we have an option to install it manually.
If you scroll down on the release page,
you can see here there are a bunch
of assets that are provided as part of the version.
And you can see here, there is a vsix file
which is the installation itself packaged as a file.
So I'm gonna click on this
to download the file and you can click also
on this thing here, which gives you the instructions
on how to install the extension from the vsix file.
It's pretty simple.
I'm gonna click on the link here
and you can see the instructions are simply
to run this command here
with code --install-extension,
then the extension file.
All right?
So I'm gonna do that.
I'm gonna open a terminal
and I'm gonna install the extension.
All right, I am now in my terminal.
I'm ready to install.
Before installing I made sure
that I've closed VS Code in order to avoid conflicts.
Now I can go ahead and type code --install-extension,
space, then the name of the extension file.
So that's vscode-jest, the version, and dot VSIX.
Now as a reminder, this works
because I'm in the downloads folder
where I saved my extension.
I'm gonna hit enter.
This is gonna install the extension.
This is pretty quick by the way.
I can now create a new Salesforce DX project
for the sake of demonstration.
So 'sfdx force:project:create',
and I'm gonna provide a name, just gonna call it demo.
All right, so this is really a clean slate project.
This is a good reference
to get the installation instructions right.
I'm gonna open this project now with Visual Studio Code
with 'code demo' because my folder name is 'demo'.
Right.
And here we are.
We are in a really clean project
at this point Jest Code Coverage Overlay will not work.
So we need to do a couple more steps
before we can activate the extension.
So what I'm gonna do first is
that I'm gonna open a terminal window
by going on a top menu.
I'm gonna open it directly
in the IDE so we can see everything here.
And I need to actually install
the Node project dependencies
that are contained in package.json.
To do that I 'run npm install'.
And this will fetch all dependencies.
So you'll see a bunch of warnings in there,
but nothing really serious here.
And now our project is installed
and you can now see there's a node_modules folder here.
All right, now that our project is installed,
the next thing we need to do is to
add something to be tested.
So we're working right now on an empty project
and you can see there are no Lightning Web Components.
So what I'm gonna do is I'm gonna take a component
from another application.
This is called Lightning Web Components Recipes,
and I'm gonna drop that in our project folder.
This is a really basic component
with a very limited amount of code,
but we're gonna use it to demonstrate testing
and code coverage for Jest.
Now that this is done, we have something to test.
We also need to configure the Jest project.
By default, Jest tests only vanilla JavaScript
but our project is a bit more specific.
It's a Lightning Web Components project.
So we need to configure Jest
so that it knows that it needs to
use a particular Jest plugin
to test Lightning Web Components.
Now, I also need a configuration file
that I'm gonna take
from one of the other applications I have running,
for example, Lightning Web Components Recipes,
and I'm gonna drop that in our project.
This particular configuration file
is always named 'jest.config.js',
And this is the standard name for Jest configuration.
It needs to be at the root of the project.
And what we're looking at right now
is the minimum configuration that needs to be added
to make the Lightning Web Components Jest plugin work.
So what does it do?
It's a JavaScript configuration file.
It imports the plugin configuration.
Here we can see the name of the plugin,
which is sfdx-lwc-jest,
and it takes the configuration
and it adds it to the default Jest configuration.
By default Jest will always look for a jest.config.js file
and load configuration from there.
So what we did essentially here is
that we added the configuration
for a plugin to the default Jest configuration.
And this is extremely important
because if Jest does not find this file, it will not know
how to handle Lightning Web Components tests.
Now that this is done...
Another thing, we need to actually enable git
for our project.
The extension used Jest watch mode.
So it's basically scanning our code for changes.
And each time the code changes, it reruns the test.
But in order to run the watch mode,
there's a dependency on git.
So whether you use it for version control
or not doesn't matter,
but you need to set up the git project.
So what you need you to type here
in the console is git init.
You don't need to integrate with a remote repository.
You just need to run git init
so that you have the minimum git structure folder,
and this lets the Jest extension work.
At this point, I need to restart my VS Code editor.
So what's new here is this Jest status bar here
at the bottom of VS Code.
And you can see that it's running some things
and starting watch mode, running some tests.
And this means the extension is doing its job.
Now it will stop with this particular status,
meaning that the tests have passed,
and you can click on it
to get a detailed status of the test reports.
Now let's take a look at where our tests say.
I'm gonna open the JavaScript file
of our Lightning Web Component
and we're gonna check what happens to it.
Right now it's not showing anything.
The overlay is not showing
because by default it is disabled.
So what we're gonna do now is
that we're gonna toggle this.
To do that I'm gonna use the command palette
of Visual Studio Code with Command+Shift+P on Mac,
or Windows+Shift+P, on a Windows machine.
Now in the menu, you'll have to type Jest to bring in
this command here, Jest Toggle Coverage Overlay.
And here for me, it's the first option
because I've ran this quite a few times,
but it may not be the first one for you.
Now I'm gonna hit enter to select it.
And this is gonna rerun the tests.
And here we go.
We now have the code coverage overlay showing up.
So in this particular instance,
I have one line here, which is not covered.
You can see it's highlighted in red.
And I can also see here
that I have the overall file coverage with detailed stats.
Now what's interesting is
that if you have full coverage,
you won't see any overlay.
Just to let you know,
the covered code is not highlighted in green.
So don't expect to see anything
if you have full coverage.
You will always see, however this top line.
Now let's try to fix our code coverage.
What I didn't tell you before is
that I have purposefully limited the tests.
So I'm gonna open the test file here on the side.
Let me rearrange my windows
so we can see everything in one single screen.
So we now have the code we test on the left
and our test code on the right.
And on the testing code side,
we have a test that passes.
You can see here that we have a little green check mark
which marks the test as passing.
We can also run this test individually.
And if I scroll down,
you'll notice here that I have disabled a test.
I commented this out
specifically to get a line coverage miss here.
So what I'm gonna do now is
I'm gonna uncomment this other test.
And since Jest is running in watch mode,
as soon as I save my file here,
it's gonna rerun Jest coverage.
And you can see here it's rerunning again on the bottom.
And there we go, the red marker has gone.
And you can see now that my additive code coverage is 100%.
That's how you set up Jest Code Coverage Overlay in VS Code.
I hope that you found these instructions useful
and that you're gonna enjoy this extension.
I'll probably re-edit this video
once the VS Code extension is available
in a non alpha version.
It will be even simpler to install it from the marketplace.
Thanks for watching.
If you learned something new today,
make sure to like this video.
If you want to get more content like this
pushed directly to you,
click subscribe and that bell to get notifications.