Installing Vue Test Utils

Hello and welcome. Over the stretch of this course, we will learn how to test Vue components. We'll be using Jest as our test runner, and if you have not worked with it yet, you will find an introductory course right here at Vue School. In this video, we'll prepare everything that we need over the rest of this course.

We have a Git repository prepared that you'll be able to clone, and then we'll make ways from here. Let's start with that. You can clone or download the repository from our GitHub page. No worries, you will also find the link in the video description.

In this case, I will use clone, but you can use download as well. I'm already in the right folder where I want to work, so let's start to clone the repository right in here. Let's briefly talk about this repository. The source folder contains all the view components that we're going to test over the upcoming videos.

The specs folder hosts all our spec files and you see a bunch of them prepared already. To get started, we can run yarn install and install all currently required dependencies. After this is done, we should be able to run yarn jest and probably see a bunch of specs failing on us. Good, that's all working as intended.

Let's proceed. In order to use all modern JavaScript capabilities, we'll use Babel. And this is all prepared for you within this repository. The important pieces are following.

js and this file contains the basic Babel configuration and environment. And we need to tell Jest about it as well in this file. Now, Jest will run all JavaScript files through the Babel compiler. Here, it should be noted that Jest would automatically run everything through the compiler without associating a file format.

But you'll see why this is necessary just in a few moments. Let's move on. Our first primary goal will be to teach Jest about view files. For this, we'll need to install two new npm packages.

We need the view template compiler and also we need view Jest package. Those will allow us to consume view files inside our specs. We can install both at once. As a short explanation what this package does, the template compiler will As the name suggests, compile the code that's written inside the Vue file template and return HTML.

And Vue Jest takes care of providing everything in the way that Jest can consume it properly. There's one last step though we need to teach Jest to properly use it. js again. I already added the file extension of Vue, so that's good.

But we need to teach a transformer about it as well. vue should run through VueChest. js file and let's create our first spec right away. We'll now try to import the first Vue file and print out the content right away to see if it works.

Note that we can use the add symbol in this setup to reference the source folder. Now, let's console log out whatever we receive. If everything is set up correctly, we should see the test kind of running. Great, that seems to work.

One thing to point out, as Chess knows about the Vue file extension, we don't need to add it manually every time. Still works, that's great. But what now? Good news, Vue now provides a clear solution on how to test Vue components.

The package we need is called Vue Test Details. Let's add it to the project. TestUtils is a scope package and part of the Vue organization npm. Now we'll need to import it in our test.

Vue TestUtils exposes a few different methods. The one we're going to look at in the next video is called mount. Hello and welcome. Over the stretch of this course, we will learn how to test Vue components.

We'll be using Jest as our test runner, and if you have not worked with it yet, you will find an introductory course right here at Vue School. In this video, we'll prepare everything that we need over the rest of this course. We have a Git repository prepared that you'll be able to clone, and then we'll make ways from here. Let's start with that.

You can clone or download the repository from our GitHub page. No worries, you will also find the link in the video description. In this case, I will use clone, but you can use download as well. I'm already in the right folder where I want to work, so let's start to clone the repository right in here.

Let's briefly talk about this repository. The source folder contains all the view components that we're going to test over the upcoming videos. The specs folder hosts all our spec files and you see a bunch of them prepared already. To get started, we can run yarn install and install all currently required dependencies.

After this is done, we should be able to run yarn jest and probably see a bunch of specs failing on us. Good, that's all working as intended. Let's proceed. In order to use all modern JavaScript capabilities, we'll use Babel.

And this is all prepared for you within this repository. The important pieces are following. js and this file contains the basic Babel configuration and environment. And we need to tell Jest about it as well in this file.

Now, Jest will run all JavaScript files through the Babel compiler. Here, it should be noted that Jest would automatically run everything through the compiler without associating a file format. But you'll see why this is necessary just in a few moments. Let's move on.

Our first primary goal will be to teach Jest about view files. For this, we'll need to install two new npm packages. We need the view template compiler and also we need view Jest package. Those will allow us to consume view files inside our specs.

We can install both at once. As a short explanation what this package does, the template compiler will As the name suggests, compile the code that's written inside the Vue file template and return HTML. And Vue Jest takes care of providing everything in the way that Jest can consume it properly. There's one last step though we need to teach Jest to properly use it.

js again. I already added the file extension of Vue, so that's good. But we need to teach a transformer about it as well. vue should run through VueChest.

js file and let's create our first spec right away. We'll now try to import the first Vue file and print out the content right away to see if it works. Note that we can use the add symbol in this setup to reference the source folder. Now, let's console log out whatever we receive.

If everything is set up correctly, we should see the test kind of running. Great, that seems to work. One thing to point out, as Chess knows about the Vue file extension, we don't need to add it manually every time. Still works, that's great.

But what now? Good news, Vue now provides a clear solution on how to test Vue components. The package we need is called Vue Test Details. Let's add it to the project.

TestUtils is a scope package and part of the Vue organization npm. Now we'll need to import it in our test. Vue TestUtils exposes a few different methods. The one we're going to look at in the next video is called mount.