Vitest UI

[00:00:00]
>> Brian Holt: This is kind of fun, this is a new thing in Vitest, so copy this one with me. Come in here and you can stop this. We're gonna say npm install D at Vitest, slash UI at 21.3
>> Brian Holt: And in our scripts here, we're just gonna add another one here, that's it's gonna be test colon UI, and it's gonna be Vitest dash, dash UI.

[00:00:42]
>> Brian Holt: There's nothing special about this colon. That's just like the way that I like structuring my commands. This is a test, but we want the UI version of it. You could also call this test colon coverage, that's actually probably what I would call it. But everyone else calls coverage, so, I just I stick to the convention.

[00:00:58]
But we have test UI here, let's go try that npm run test colon UI.
>> Brian Holt: And you get this kind of like nice in browser experience with Vitest. So you can see it ran my tests, they all passed the amount of time it took. You can only look at the failing ones, you can run them individually if you want to.

[00:01:21]
>> Brian Holt: No, you can't run the snapshot one, because it's a snapshot test. But all that stuff, there's a module graph, you can see what it depends on, which is kind of cool. They move around, this is extremely useful. You can see the code behind them. You can see what they log out to the console, you don't have anything in there, so, it won't do that, but, yeah, it's kinda cool, right?

[00:01:46]
That's it, that's the whole thing, I just like, this is neat. I should show people this, right? So that's the whole story, what I haven't shown you so far? And let's just go ahead and do it now, we haven't downloaded the VS Code extension for Vitest, and it's very cool.

[00:02:02]
So come to VS code, come in here and do Vitest. I have it down here, so make sure you're getting Vitest from Vitest and install that. I'm gonna shut this down for a second so I can show you this. Once you have that, you'll have this testing thing here on the side, for whatever reason, mine wasn't showing up.

[00:02:23]
So if you had the same problem as me, like it wasn't showing up, with the Vitesting and saying, like you need to install Python stuff or something like that, just navigate to it, disable it, uninstall it, and then reinstall it. That should work, you can also always say Shift Command P, or Control Shift P.

[00:02:39]
And reload window here, that usually fixes almost all my VSCode problems. All right, so now I have here my source directory. In my test directory I can see all of my tests, you can actually go and see the individual tests in here as well, and let's just go ahead and run everything, right?

[00:03:00]
Let's just get crazy, It'll give you all the test coverage stuff in here, so you can see all the various things that it is covering. You can run test individually. Pretty cool to come in here and let's use this one and just say, I don't know, not to be null or something like that.

[00:03:20]
That's something that's definitely gonna fail, notice there's a check mark here, I'm gonna save this. And if I click to run this, it's actually gonna run that test individually. And it's gonna tell me it broke on this line, for this reason. Pretty cool to see that directly in your browsers, this the thing that broke.

[00:03:42]
I think it's pretty compelling, so a lot of times I won't even run the command line client. I'll just rely on the this to do it itself. And now I can run this again, and it'll turn up just fine. And then you can do the start continuous run.

[00:04:00]
Let's do it this way, run, okay, or I guess we can do the coverage, that's fine. And so now I'm not even gonna press the button, I'm just gonna say not and save it. And it's gonna just immediately run it in the background. Every time I save the file, it's gonna keep running and re-running my tests.

[00:04:20]
Which is kinda cool, and it's actually smart enough to say this test only tests this file and it'll only run those specific ones, which is pretty cool. It's kind of there's a there's many ways to go about doing this. So just pick your favorite if you like the CLI, by all means stick with that.

[00:04:34]
If you like the UI version, you can do everything through the UI. I'm in VSCode all day, so I tend to use VSCode or the CLI, but that's that's totally up to you.