We collect the environment for modern TDD on JavaScript + VS code
TDD has not been outlandish for a long time: hundreds of articles can be found on this approach, and every beginner knows what book he needs to read about extreme programming.
Many of my colleagues also use TDD. They add a test, write code, refactor, repeat. The process seems to be the same, but for some it takes one minute, while for others five. And it's not that the latter think slower. Just the former have a set of tricks to optimize the work with tests.
Let's start with the simplest: you need to get to the tests.
For this I use Open Spec File
This extension helps to open the test file from the code in the next tab.
')
There are many, for every taste:
- UnitTest Switcher allows you to switch the first menu item on the right mouse button
- Switch to test offers customization of the path to the file with tests for projects with a complex structure
In my experience, the fastest option is hotkey. Select a test file from the list takes 2 seconds, hotkey - half a second.
So, we got into the test file. Here the Add Only extension will help us a lot. With it, we can cover describe, it, test, context with the only modifier with one click and only run it. Simple and convenient.
Another JavaScript test runner extension adds a couple more buttons next to add only: launch and debug. It is convenient in moments when you need to run a pack of tests once.
The Coverage Gutters extension highlights the coverage of your code with tests. With it, you do not need to spend time on proceedings, which part of the code you could not cover. All uncovered branches will be visible immediately.
The Code Coverage extension can be either an alternative or an addition to the previous one: it emphasizes uncovered lines + can display the number of covered lines in an open file in the status bar.
Information is taken from the lcov.info file in the coverage folder. For extensions to indicate current issues, run testing with the watch and coverage flags.
If you use Jest, then try the plugin of the same name . It instantly captures changes in the code and runs the affected tests. Adds chips to the interface:
Jest Test Tracking Console
Shows markers the status of tests and adds a description of errors
Wallaby is a great paid plugin. It is focused on TDD. In my development, I do not use it, but I feel that I have to tell. Wallaby runs tests very quickly after changing the code, updates and shows coverage on the go, it also allows you to jump to the test file and much more. More information can be found on the website: wallabyjs.com .
I talked about those plugins that I use daily in my work. Such a set is convenient for me and will definitely be useful to you if you run tests using the tools out of the box. Their installation and configuration will take ten minutes, and after that they will save your time every day.
There are many other good extensions on VS code for convenient work with tests - write down which ones simplify your life.
Many of my colleagues also use TDD. They add a test, write code, refactor, repeat. The process seems to be the same, but for some it takes one minute, while for others five. And it's not that the latter think slower. Just the former have a set of tricks to optimize the work with tests.
Jump to the tests
Let's start with the simplest: you need to get to the tests.
For this I use Open Spec File
This extension helps to open the test file from the code in the next tab.
')
There are many, for every taste:
- UnitTest Switcher allows you to switch the first menu item on the right mouse button
- Switch to test offers customization of the path to the file with tests for projects with a complex structure
In my experience, the fastest option is hotkey. Select a test file from the list takes 2 seconds, hotkey - half a second.
Run tests
So, we got into the test file. Here the Add Only extension will help us a lot. With it, we can cover describe, it, test, context with the only modifier with one click and only run it. Simple and convenient.
Another JavaScript test runner extension adds a couple more buttons next to add only: launch and debug. It is convenient in moments when you need to run a pack of tests once.
We follow the coating
The Coverage Gutters extension highlights the coverage of your code with tests. With it, you do not need to spend time on proceedings, which part of the code you could not cover. All uncovered branches will be visible immediately.
The Code Coverage extension can be either an alternative or an addition to the previous one: it emphasizes uncovered lines + can display the number of covered lines in an open file in the status bar.
Information is taken from the lcov.info file in the coverage folder. For extensions to indicate current issues, run testing with the watch and coverage flags.
All at once
If you use Jest, then try the plugin of the same name . It instantly captures changes in the code and runs the affected tests. Adds chips to the interface:
Jest Test Tracking Console
Shows markers the status of tests and adds a description of errors
Wallaby is a great paid plugin. It is focused on TDD. In my development, I do not use it, but I feel that I have to tell. Wallaby runs tests very quickly after changing the code, updates and shows coverage on the go, it also allows you to jump to the test file and much more. More information can be found on the website: wallabyjs.com .
Summary
I talked about those plugins that I use daily in my work. Such a set is convenient for me and will definitely be useful to you if you run tests using the tools out of the box. Their installation and configuration will take ten minutes, and after that they will save your time every day.
There are many other good extensions on VS code for convenient work with tests - write down which ones simplify your life.
Source: https://habr.com/ru/post/461737/
All Articles