Vitest VSCode Extension

[00:00:00]
>> I got one more thing to show you here. This is gonna be specific to VS code for just a second. I have a extension here installed called the Vtest extension. This is heavily inspired by the Just one, which you can see I also have installed here. I used to work with Orders on the VS code team.

[00:00:25]
Now what does Order work on now? I don't know, I think Order has left Microsoft. But Vtest is largely, they took everything that's great about the Just extension and they just ported it to Vtest. In order to make this work the way that we want it to, you'd have to go into your package.json and change this from test to be test watch.

[00:00:46]
Cuz, right, it's a watcher whenever I run test, oops, npm run test. It likes, one more time, here we go, npm run test. I got rid of it, testwatch. Notice that it's sitting here, right? It's actually not exiting. In order to get the extension to work correctly you have to get it to just run once and I can't remember how you do that, npm or mpx vtest -- help, how to get it to run once?

[00:01:25]
I think it's just run, okay, there you go. So what you want here is you want your test. So in test to be the vtest -- run, like that. And now I think if I say npm test, it should just run once and exit which is cool, it does that.

[00:01:47]
Now I can go here into my testing here, you can see this little beaker on the left. And I think I can just click run all my tests in there. I can see all of my tests running here. I can click on this, show me in the file where this is?

[00:02:10]
If we go to something like pet which has several tests, you can see it individually here and here, the check marks. I can run them directly again from the browser. Let's say I'm messing with something and I'm here in carousel, and all of a sudden I change this to be active or something else.

[00:02:30]
I can run my test directly again and I can see here this is breaking and I can go directly to that. It can say, hey, I expected this to be this, so it's actually gonna inline all of my feedback directly there. I can see which assertion is breaking, and then I can go back and fix that, run my tests again.

[00:02:55]
I don't have the debugger set up, but you can actually run that directly into bugging, so you can debug your tests, maybe it'll work, no, I don't think so. Yeah, I have to go set up all the VS code stuff to get that run, I'm not gonna do that right now.

[00:03:08]
But if you have all of your debugging stuff set up for VS code you can actually run it directly in the debugger and see piece by piece what's happening. So, the key there to getting that working correctly is making sure that you have your NPM run test runs just once, right?

[00:03:27]
So that's why I have to move the watch or Vtest to the just the watch and then test is just run once. So if you're working in Vtest I strongly suggest that you download this extension. By the same token, if you're working in Jest I suggest you run or you install this one as well.

[00:03:49]
Okay. Any questions about that? We only have seven tests, so this is really not that many. But I'm sure some of you have worked on code bases with hundreds of tests, this can be very nice. It's nice that you can run them individually, right? I can come in here and I can actually say, hey, please only run this specific test and do not run the other ones.

[00:04:14]
It's nice so that you don't have to wait minutes for your entire test suite to run. I guess that's another nice thing about vtest and Jest in general. If I go break results and then I go back and run test again, it's actually going to go run the breaking test first, right?

[00:04:32]
So it's actually smart enough to show you only the breaking tests and not rerun everything every single time. So, there's a bunch of features like that, that it does under the hood for you. Again, inspired by Jest. Jest is really the one that came up with a lot of those just developer niceties, and then everyone's kind of been copying it ever since.