Now, it's very possible that you use Laravel Mix as your webpack wrapper of choice. So how do we get that to work when using something like Vue Test Utils, and we want to hook into that webpack build? Okay, let's tackle it from scratch. So here I have a brand new installation of Laravel 5.5. I've done nothing else. Now, we will be using Laravel Mix, so let's go ahead and install the default dependencies that come with Laravel, and that's going to pull in these. But as we know, there's a bunch of things we're going to need. So if I switch back to Safari, yeah, you kind of have to go through that same workflow, at least until somebody creates like a dedicated wrapper or a command line utility that you can trigger. Okay, so we're going to grab all of this. Let's create a new tab. But before I run that, if I scroll down, we will need a couple of other things like js-dom and js-dom-global, so I will tack those on. Next, we have been using expect as our

create a new tab. But before I run that, if I scroll down, we will need a couple of other things like js-dom and js-dom-global, so I will tack those on. Next, we have been using expect as our assertion library of choice, so we'll grab that, and I think that should be good to get us started. So let's run that command. Okay, so at this point, we have all of these various dependencies that have been pulled in. So that means I can run npm run dev, and that's going to compile the existing script that we have. And you'll remember this is all declared in our webpack.mix.js file. Okay, but now we want to hook into Laravel Mix's webpack configuration. So let's do this. In my test directory, I'm going to create a new folder here. Call it anything you want, maybe JavaScript, maybe Vue, any of this is fine. Okay, next, within here, we'll have our setup.js file. And if we switch back to Safari, you'll remember this is kind of like the bootstrap file.

maybe Vue, any of this is fine. Okay, next, within here, we'll have our setup.js file. And if we switch back to Safari, you'll remember this is kind of like the bootstrap file that we will trigger. So if we scroll down, where is it? Here it is. For now, we're just going to pull in or require jsdom-global so that we can simulate a browser environment with Node. Next, to trigger the script, of course, we need to update package.json. And you'll see that Laravel already includes some for compiling everything down. Let's add another one. Now, we could call it test. In this case, that would be fine. Or if you want test JavaScript or test anything you want, it doesn't matter. So you'll remember we want to trigger mocha-webpack. We'll then specify the path to our webpack configuration. And now here, we want to make sure that we point to Laravel Mix's configuration file. So that will be in your node_modules directory, laravel-mix. And in fact,

to our webpack configuration. And now here, we want to make sure that we point to Laravel Mix's configuration file. So that will be in your node_modules directory, Laravel Mix. And in fact, let me just show you. node_modules, Laravel Mix, setup, and then webpack.config.js. Next, we will require our test JavaScript setup.js file as our bootstrap. And then finally, we are going to test everything within the test JavaScript directory just as long as it ends in *.spec.js. And I think in some environments, you have to add a \ here. I was noticing that earlier. If you come across any issues with running it, just make sure you add a \ there. And there's our npm script. So now, if we were to give this a run, npm test, of course, we have zero passing because we have zero tests. Okay, so we're going to go into our test directory, JavaScript, and let's see. Why don't we test something that we have out of the box?

we have zero passing because we have zero tests. Okay, so we're going to go into our test directory, JavaScript, and let's see. Why don't we test something that we have out of the box? So we'll go to resources/assets/js. I think there's a component. Yeah, Laravel includes this little example component out of the box. So let's quickly write a test for that just to prove everything's working, and then I'll leave it to you. Now, this component doesn't really do anything, so let's keep it simple and just assert that we see example component. Okay, let's do this. Let's close node_modules. And then within here, I'm going to add a new file called example.spec.js. We're going to import mount from vue-test-utils. Next, we're going to import expect. You'll probably want to turn this into like a little snippet, very much like you might do with a PHPUnit bootstrap to class. And then finally, let's import example from, and let's see, we're going to go up

want to turn this into like a little snippet, very much like you might do with a PHPUnit bootstrap to class. And then finally, let's import Example from, and let's see, we're going to go up to resources/assets/js/components/ExampleComponent. All right, so let's go ahead and describe that. And we'll say it, this is silly, but just to test it, it says that it is an ExampleComponent. This is some great testing here. Okay, so all we're going to do, it's not a good test to write. I'm mostly having fun here. So we're just going to assert that it says example component somewhere on the page. So let's mount the ExampleComponent, and we will expect wrapper.html to contain example component. Okay, so let's give this a run, npm test, and there we go, we get green. Now if we were to change that, changed component, and we give that one a run, of course it's going to fail. We can fix that by saying changed, and then run it again,