Moving on to episode 2. So we're still working with the source code from the last episode, and if I run npm test, everything passes. But now at this point, I want to switch over to testing a .vue component. This is what I'm most likely to create in real projects. So we'll open this up, and I'm going to rename this file to counter.vue. Now within my test, of course we have to update it to import counter.vue. Okay. Now at this point, if we give it a run, it's still going to pass, which might confuse you. But don't forget, counter.vue, it's not a Vue component yet. It's still just exporting a module. So let's fix this. We're going to wrap this within a <script> tag, like so. And then we'll have our <template> here, and we'll grab this section, like so. Okay. Now let's give this a run. And I bet it's going to fail, because we're not pre-compiling this file, so it's expecting a module, and it comes across all of these HTML tags. So notice,

Okay. Now let's give this a run. And I bet it's going to fail, because we're not pre-compiling this file, so it's expecting a module, and it comes across all of these HTML tags. So notice, you may need an appropriate loader to handle this file type. If you've ever seen this message before, you of course know it's related to Webpack. So this is where Mocha Webpack comes into play. It allows us to pre-compile that file before we trigger the test. So at this point, webpack.config.js is completely empty. So let's get this set up. Now, don't forget, if you use something like Laravel Mix, we're going to do this for you out of the box. And I'll show you how to reference Mix's webpack.config file, if you'd like to go that route. Now, I want you to remember, this can be your real Webpack configuration file for your own project. So if you already have one that you're using to build, you can also adapt this very slightly.

Now, I want you to remember, this can be your real Webpack configuration file for your own project. So if you already have one that you're using to build, you can also adapt this very slightly to be used in your tests. But in our case, we don't have anything like that. So let's But in our case, we don't have anything. So we're going to get started. Now, luckily, if we want to compile Vue components, there's already a Webpack loader called VueLoader that we can use. So we'll say module.rules. And our first rule will be look for anything that ends in .vue. So look for our Vue files. And I want to use VueLoader. So I need to pull that in. Yeah, you know what, I'll be honest with you, all the dependencies that are required to do this, it does make me sad. Because you think in some other communities, even something like PHP, you pull in PHPUnit, and you're ready to go. But the JavaScript and the Node ecosystem is very

it does make me sad. Because you think in some other communities, even something like php, you pull in PHPUnit, and you're ready to go. But the JavaScript and the Node ecosystem is very different. It's very explicit. It's on you to pull all of these things in at the moment. And I'm hoping that it'll get fixed and it'll get streamlined for the common user. Because right now, the barrier to entry is actually quite high if you want to use this stuff. I mean, think, if you want to test your Vue components, you have to know Vue, you have to understand Vue components, you have to understand how to use Vue Test Utils, you have to understand how to use expect, and you have to understand how to use Webpack. So it's a very high barrier to entry. Anyways, does this all make sense? We're now telling Webpack to intercept any file. So intercept the require of any file that ends in .vue, and we want to run it through Vue Loader,

Anyways, does this all make sense? We're now telling Webpack to intercept any file. So intercept the require of any file that ends in .vue, and we want to run it through VueLoader, which will compile it down for us. So I'm now going to give this another run, and I think we should be okay. Yeah, and we're back to green, but now we're using Vue components.