Loading
Current section: Setup 5 exercises
Problem

Visual Studio Code extension

Set up the Vitest extension in VS Code to view, run, and debug tests directly in the editor for a smoother testing workflow.

Loading exercise

Transcript

00:00 Tests is a great way for you to get feedback on your software, whether you're building a new feature or fixing a bug, your tests can confirm or disprove your approach. And the faster you can get that feedback, the faster you'll be able to iterate on the apps that you're building. Imagine if you had to run your test command manually every time you make change in your code.

00:18 That would be extremely time consuming. That's why we have things like the watch mode to help us out. But we can push it even further by using the official VTest extension for Visual Studio Code. In fact, open your Playground directory and let's install and explore that extension together. In Visual Studio Code, go to the extensions tab and search for VTest.

00:38 We are interested in this first extension from the VTest team. So click on it and then click on the install button to get it installed in Visual Studio Code. Once you do that, you will see this beaker icon pop up over here. So let's close it. Click on this icon and you will see the controls for the VTest testing extension. Let's start with

00:55 this top level controls over here. So first, you can ask VTest to crawl your tests again to refresh the list of the tests that VTest can see. Then you can run all the tests, run them in debug mode, run them with code coverage, and also start the continuous run or watch mode. Then below here, you can filter your tests by the test name or maybe specific tags or even using some special syntax to

01:15 exclude tests, for example, which is very handy. Now, VTest says that there's no test results because we haven't run any tests yet. And under that, you can see the tree of all your test files and test cases within those files. So right from the bat, you can see there's a lot that you can do with this extension. Let's start slow and just run all the tests by clicking this run icon.

01:35 Once you do that, you immediately see this visual feedback of your test results, both in the extension over here and in the test results tab next to your terminal. Let's take a look at that one. Here in the test results panel, VTest will show you the summary of your test run. For example, if I click on the successful test, there's nothing to show. But if I click on this failed test,

01:53 VTest will tell me more information about that failure. So here I can see the test case at question, then the comparison between the expected and the actual values, which likely means that one of my assertions failed. And then if I scroll to the bottom, I can see the exact assertion that is the problem. I can click on this open file icon and this will jump me straight to this to equal

02:13 assertion in my sort by test.ds file with the inline indicator as well as to what's going wrong. Let's explore that in more detail. I will close this panel and I will see that the extension itself has the inline test results right next to the test cases that are passing or failing.

02:30 So for example, the first one here I have passing with the screen check and then the second test case is failing with the red cross and it's very nice for me visually to see what's going on. And then if I just go to this failed assertion, VTest will let me know once again what failed here. Basically it will print this rich diff, similar diff that you see when you run your

02:47 test in the terminal, it will insert it inline in my editor, which is really handy. So here it looks like I have a problem with my sort by function. I expected to sort a list of players by their score, so I provide it with this area of players, but the result I get is not what I expect. And this is where you come in. Your task for this first exercise is to debug and fix this

03:06 failing test. And to help you do that, head to this testing extension and then start your test run in this continuous mode by pressing on this eye icon. And this way, while you're working on this exercise, VTest will keep updating the test results visually in your editor to help you know once you're getting closer to the solution.