Unit Testing (Vitest) Tutorial #6 - Vitest UI & VS Code Extension

Key Takeaways

Okay then my friends. So far when we've been running tests we've seen all the results in the terminal right and that is fine but sometimes it can be a little bit finicky reading all the results that way especially when you start getting failing tests and you want to debug those tests. So for that reason I want to show you two visual tools we can use with Vest which helps to visualize tests a little bit more and helps us to pinpoint where exactly tests might be failing. So the first one I want to show you is the vest UI package which we need to install into the project. So let's open a terminal which is still running the vest process. So I'm going to quit this process by pressing Q and then I'm going to install the package by typing npm install then hyphen dupercase because this is a dev dependency and then at vitest slash UI. Then we can hit enter. And then while that's going on, I'm going to head to the package.json file and I'll add another script to the script property. And this time I'm going to call it test-en ui. For the value, we'll say v test. And then we'll use the UI flag with two dashes. So when we run this script now, it's going to run vest itself and run all the tests as well as watch those tests for changes. But on top of that, it's also going to start up Vest UI and spin up a local server where we can view that in a browser. So let's come to the terminal and try running this by typing npm run and then the script name which was test-en ui and then hit enter. Once you've done that, a browser should automatically load vest UI for you where you can see all the tests that we've made and which tests are passing and so forth. So on the left over here we can see a kind of file tree I guess which shows us all the test files that we have and in our case that's just the examples.est.js file at the moment but if we had more they would show over here as well. We can expand this file and when we do that we can see all the test suites inside the file. So we have the longest string one, the is prime one and the shipping cost one as well. Again we can expand those as well and inside we see all the test cases for those test suites. Also notice all the green ticks. That means all of these tests are currently passing. So that's a nice little visual representation of the test and their current state. Now up here at the top, there's a few different buttons we can click. And this first one is a shortcut for expanding or closing all the tests, which is nice. The next one is to go back to your dashboard if you're not already on it. And the play button is to rerun all the tests again. We've also got this theme button to toggle between light and dark themes. Also, you can search for specific tests by typing your search term into this input right here. And that's going to filter the tests that you see down here in this panel. Now, if we expand a test file and then expand a suite, we're going to see all the test cases in that suite, right? And if we hover over one of those, we should see a little code icon on the right of it. So, if we click on that, it's going to bring up the code panel on the right and place us directly in the position that test is in the file. Also, we can edit the code directly from here. And then if you save the file by pressing Ctrl + S, then it's going to make that save permanently to your file. It's not like the DevTools console. This actually updates our real code. So then let's try going back to the code and we're going to change something so that a test fails. All right, then. So I'm just in the examples.js file and I'm going to come to this longest string function and I will change the return down here from string one to string two. And when I save that, it should mean that several tests now fail. And now in V test UI, we can see on the dashboard that three tests are failing. If we look over here, we've got some tests that are red as well with a cross next to them. So if we open up this test case, we can see these three tests are now failing right here. And if we click on one of those again, it highlights where it's failing with a message as well. It says in this case, it expected Snorlax to be Pikachu. Okay. And down here it expected Pidgey to be ditto. But because we're returning string 2 constantly, that's why these errors are occurring. Okay. So I'm going to correct that change we just made now by coming to the return value and changing it back to string one at the bottom of the function. Then we can save the file so that all the tests should pass again. And now I'm going to come to the terminal and press Q to quit the testing process currently going on in the background. And that means that now Vest and Vest UI are both no longer running in the background. All right, so that's Vest UI. It allows us to view, run, and even make changes to the tests in a friendly interface in a browser. Next up, I want to show you an alternative UI tool for Vest, and that is the Vest VS Code extension. So then to install this, go to your extensions by clicking on this button, and then you just want to search for Vest. And it's the official Vest plugin that you want. So, make sure you find the one that says vtest.dev underneath it with a little blue tick icon. Anyway, install that by clicking on the install button right here. Mine says enable because I already had this package installed. So, I'm just going to reenable it right now. And once it's installed, you should see a little flask icon appear in the sidebar over here, which you can click on now to open the testing panel. If you don't see that, just restart VS Code. Then you should. Anyway, inside this panel, you can see the same kind of treel like structure of test, which you can expand by clicking on the little arrows next to each one. And again, you should see a little green tick next to each test that passes. Right currently, they're all green because they're all passing. Now, if I hover over this root test option right here, then I should see a bunch of icons or buttons appear on the right. The play button on the left, if you click it, will rerun all the tests in every file. So, if I click on that now, you should see a little flicker of green ticks while they all get rerun. If you press the play button over a single suite, then it's only going to rerun the test in that suite. Also, we can click on the little I button and that toggles on watch mode or continuous run mode as it says here. And that means whenever we make changes to the files and save, it's going to rerun those tests automatically for us. So, I'm going to keep this option toggled on for now. And by the way, you can do this on a file by file or suite by suite or test by test basis as well because you can toggle this option next to each one. I'm just going to keep it toggled on at the root for now so that every test gets rerun when I make changes. You can also rerun all the tests by clicking on this double play button up at the top as well. And you can filter the tests that you see here by searching for one in this search input much like we could in Vest UI. Anyway, let's try changing the return value in the longest string function again back to be string two instead of string one so that we get an error. And then we're going to save the file. And now because we have continuous running toggled on, we should see the tests rerun and some of them are now failing. So if you click on an individual failing test, then it should open the test file at that failing test position and show you exactly why it's failing. And in this case, you can see that it expected one return value in the test, but it actually got the other. Now, I'm just going to hit escape to exit out of this feedback view and scroll to the other failing tests. And for each test that fails, we should see a little red tag next to it giving us a hint as to why this test is failing. So that's nice. Also, we should see little red crosses as well in the gutter next to every failing test too and then green ticks next to every test that passed. So then I'm going to head back to the longest string function now and change the return value back from string two to string one again and then save the file. And when we do that, all the tests should rerun again and we should see green ticks everywhere. Okay, so that is the Vest VS Code extension and this is what I'll be using for the rest of the course now to run the tests, see failing tests, and debug the test when we need to. So throughout the videos, we'll be getting much more practice using some of the different features. But by all means, use the VEST UI package if you prefer, or even none of the UI tools and just stick to running the standard test command in the terminal. It's entirely up to you. Anyway, in the next lesson, I want to move on and talk about something called testdriven development.