What is Vitest?
When you are reading this, you probably have already heard of Vite (french for Quick).
Vite is a new frontend build tool with an insane performance. Vite has the power to immediately start up and do HMR in no time, even for large scale applications. It is developed by Evan You, the creator of Vue.js Anthony Fu, vite and vitest core team member patak and 533 more amazing developers.
Vitest is a superfast unit-testing framework powered by Vite. It combines three things that could cause problems into one. Which means it is a test runner like jest, trantranspiles TypeScript, ESM etc. like Babel and bundles test dependencies like webpack. So instead of setting up three tools, you just need a single tool to test your application.
It is strongly focusing on providing the best possible developer experience. This includes incredible features like sharing the same config (vite.config.js) with your SUT. Which means that your tests run in the same Environment as your application does, which make a lot more sense to me. What made Vitest the testing tool of choice for my applications is the super Fast HMR. Vitest recognizes when changes were done. Vite immediately builds this changes, and all tests affected by those changes are executed in less than a minute.
For me, coming from jest, Vitests performance and simple configuration is a massive win and make TDD a lot more fun. It lets me freeze when thinking back to the dark days when I tried to set up Jest for TypeScript the first time. Vitest does this out of the box.
When talking about jest. Vitest shares a lot of concepts with jest, which also makes the change superfast. Long Intro Short, Vitest is the 2022 testing tool the Frontend Community deserves. So go ahead and try it out!
Why should I Use Vitest UI?
Enough introduction about Vitest. Now let's get into the topic for this Article.
When testing the CLI, for me, is just a good point to get an overview if all tests were running fine or if there were a Problem. When you want to dig deeper into the problem, an CLI is in my opinion always a bit harder to read due to the limitations in Size and Formatting it naturally has.
Another disadvantage is that you need to scroll to the interesting parts after every test execution. This could sum up.
So Normally an IDE has tools in place to summarize your test results for you and provide an overview on why your tests failed.
Since Vitest is currently in Beta, there is currently no out of the Box support for these IDE tools as we know it from jest or mocha.
But Vitest has build a UI to provide such an overview.
Hands on Vitest UI
To run the vitest UI, you first need to run npm i @vitest/ui --save-dev
By running, npx vitest watch --ui --threads false you can open the vitest UI.
If you want to try it out first, you can also check it out on the official Stackblitz.
Just run the above command and the UI should start. If not, you can download the project using the download button on the top right of the navigator tab.
I added threads false since by now there are some issues when they are on. (like issues with the node canvas package) but hey it is still in beta.
Vitest UI WebStorm Configuration
When using WebStorm, this is my WebStorm config to run Vitest UI.
After executing the command, the UI will open in your browser.
You can either hit the run button in WebStorm to simply open Vitest UI and get Insights from it while coding, or hit the debug button as always to debug your code and tests.
Add the watch flag to make sure your UI will not close after one run.
Vitest UI in action
I've made a short GIF to show you an example of how fast vitest is and how good it integrates into your dev workflow with the UI.
As you can see in the GIF, vitest immediately rebuilds the changed code and runs the tests on it within just a few seconds. I did not change the speed of the video, it is that fast. Vitest does this not only when you are changing test files, it also performs HMR and executes all the related tests when you are changing the SUT (system under Test) implementation. This makes TDD really a great experience and even more speeds up your coding pace since you never have to wait till the code is compiled and then the tests are executed.
In the next few sections we are taking a closer look at Vitest UI and I will briefly introduce all its features.
Vitest dashboard
As you can see above, in the dashboard you get a minimalistic Overview about all your tests.
In the Center you can get a Quick overview about the total number of test files, the number of passed and failed and the time it took to execute those tests.
On The Left, you have an Overview about your passing and Failing Test files.
When clicking on one of those files you open the file details, including the report, Module Graph, Code, and Console Output.
Vitest Report
In the Report section, you can find details about the failing test. This would be the test name and why and where your test has failed.
By clicking the icon on the Bottom Right of the Box, you can open the test file in your IDE.
Vitest Module Graph
Due to the fact that Vite is serving your app not from a main.js. Instead, Vite is parsing your code and keeping track of it (to know when files have changed). They can also use this data to build module Graphs.
This gives you an idea about which modules your test used to better understand what your code does and what could have caused an error. For me, this is also a good helper to identify needs for a refactor.
Vitest Code, and small IDE in your test report
Here you can see the code of this test file. But this is not just the Code, this is an Interactive window, which means this is some kind of your Playground.
If you want to, you can directly change your test code inside the Browser and see how it affected your tests.
Vitest Console
In The Console, you can simply see the console outputs your tests and their executed code produced.
They are grouped by the test files which produced the output.
Conclusion
Vitest is an amazing tool for testing in general. Even tho it is still in Beta, you can already do most of the things you are expecting from a test tool. The only downside I encountered when working with vitest was that there is by now no official WebStorm plugin. The Vitest UI is here to solve this and does an incredible Job. With it, doing TDD in the JavaScript ecosystem finally feels right, due to the immediate response and the short feedback loop. I could highly encourage to you to try it!
Since Vitest is also pretty new for me, I will update this article frequently and add also new Articles when I'm trying out new features of Vitest.
If you want to stay up to date, you can follow me on Twitter.
If you want to support me and the work I'm doing, you can buy me a coffee.
Happy, and fast testing,
Alex