- [Instructor] Now that we have a good understanding
of testing JavaScript data types,
it's time to start testing Vue JS components.
Vue JS component needs to be mounted into a DOM environment
for it to be used.
Because of this, we need tools that will help simulate
a DOM environment in our test environment
and mount our Vue JS components on it.
To follow along with this video,
you need the 03_01b branch to follow the project.
So make sure you're on the 03_01b branch.
Jest is a very extendable framework.
And in this video we'll be installing a couple of packages
that are compatible with Jest for testing Vue JS components.
The first set of packages we would install
is the 'vue test utils' package
and the 'vue jest' package.
The 'vue test utils' library
is the official unit testing utility library for Vue JS.
It provides all the low-level APIs for mounting
and working with Vue JS components.
The 'vue jest' library on the other hand,
is a transformer for the Vue files
inside the Jest environment.
Simply put,
it allows us to work with Vue JS components
in the Jest environment.
Install these two libraries at development dependencies
using NPM.
Once this installation is done,
we need to add some configurations to our project.
Back in our editor,
we need to add some configurations
for Jest to recognize Vue JS files with a '.vue' extension
and transform them using the vue jest package
we just installed.
Start by creating a 'jest.config' file
at the root of the project.
This is the file that would contain
all our custom configurations for Jest.
First, we include the model file extensions property.
Then, we'll include 'js', 'json' and 'vue'
to tell Jest to process '.vue' files.
Next, we include the transform property
and instruct it to transform our vue files using 'vue-jest'.
Lastly, we set the test environment property to 'jsdom'.
This is often the default with jest,
but I would advise you to set it explicitly.
Now that we have a Jest configuration file,
the next step is to set up our test to use Babel.
Babel transpiler enables us use ESX syntax
inside our test files.
The required Babel packages to be installed are
'babel-jest', 'babel-core' and 'babel-preset-env'
Run the following command to install all these packages
at development dependencies.
Now, don't worry about memorizing all this.
The commands are available on the
'vue test utils' online documentation.
You now have all that is needed to use the ESX syntax
and import '.vue' files in your tests.
Lastly, we'll install the vue testing library.
At this point,
you can actually start testing your application
using the 'vue test utils' library,
but why settle for good when there is better.
The vue testing library package
is built on top of the vue test utils library
and makes the process of testing vue components a breeze.
The philosophy behind the library is that,
the more tests resemble the way software is used,
the more confidence they provide.
To install this library, run the following command.
With all packages in place and fully configured,
let's mount a vue component in our test.
Create a new file mount.js inside the tests folder.
Inside the file, import the render method
from the vue testing library.
In this test file,
we'll be mounting the 'home.vue' component,
which is the login page for our application.
The 'home.vue' component is located inside the views folder.
Let's go ahead and import this component
inside the 'mount.js' test file.
Next, let's write a test case for this test.
To mount our component into the virtual DOM
that will be used by Jest,
we use the render method.
The render method gives us a good number of utilities
to work with the components once it's mounted.
One of those utilities is the 'getByText' method,
which we'll get to use later on.
Let's go ahead and run this test,
but first, ensure that you have saved the file.
If our component is not mounted,
the test will throw an error.
Run the 'mount.js' test file
by running the test command on it.
As we can see our test passes,
indicating that we have successfully mounted a component
to test.
This might not seem like much at the moment,
but in the coming videos,
we get to play around the component
by testing its content and behaviors.
See you in the next video.