Setup test runner and debugger in VScode
Recently we found a number of the guys on our team had been using print statements only for debugging code! I know right! And even worse they had never used a debugger or understood the concept, OMG!! We ended up explaining how to setup test runner and debugger in VSCode using pytest a number of times so we said hey let’s just blog it.
Now we know this may be bread and butter for some of you guys so then just simply ignore. What surprised us was how many guys had not been introduced these features, like EVER! Personally I spend all my time in the debugger as a coder, it’s just how I like to work and visualise exactly what’s happening under the hood. Not to mention I don’t have to clean up loads of messy print statements during the code review.
Test Explorer UI
Test Explorer UI by Holger Benl is a 5* extension available in the VSCode marketplace with over 900k downloads. It provides a clear intuitive UI in the side bar of code for running and debugging tests along with a rich feature set and supports languages including javascript, c++, elm, go, python and php to name a few.
Install and configure Test Explorer UI
- Open VSCode and navigate to the extension marketplace and search for “Test Explorer UI”
- Once found click Install and a new test bottle icon will appear on the left side bar of VSCode
NOTE: We have found its a good idea to restart VSCode here before proceeding. Even though not asked to do so it has caused issues for us in the past during test discovery.
3. Once VScode is reloaded navigate to your new test icon on the side menu of code. This will open up the test explorer. The explorer will be blank as we have to configure it to locate our test folder.
4. Open the command palette in VSCode by pressing ctrl+shift+p or navigating to view/command palette.
5. Once the command palette search bar is open type “Python: Configure Tests”
6. Select this and you will be presented with a menu for selecting your test framework. Here we will select pytest.
7. Next we are asked to point to the directory in which our tests are contained. Normally under tests folder. Select this and the setup is complete.
8. Now if we navigate back to the test explorer by clicking the icon on the left menu and click the refresh symbol all our test cases will appear in the explorer.
Using Test Explorer UI features
The test explorer provides us a number of features to make our lives a whole lot easier. No more print statements or running tests from the command line and trying to trace the error codes returned.
- We get a expandable list of all tests in the test directory we set which is sortable, runnable and debuggable by full suite, sub-folder, file or individual test cases.
- Controls appear next to all tests for run debug and jump to source code.
- We also get a neat toolbar over each test case in the code which is really handy saving us valuable time jumping to and from the test explorer.
- Debug points can be set as normal in VSCode by selecting to the left og the line number and droping the red dot. We can set debug points in the tests but also in the functions and files of the code under test which is a huge help in figuring out how our tests are performing.
And thats it in a nutshell. This may be basic but its something we use all day every day. A true craftsman utilizes all the tools at his disposal and this is really a must for productivity and a happy coding life.
Hope it makes you day awesome
Keep an eye on our github repo for new projects and tutorials.
