I've been working on this new project where it's vanilla Javascript and HTML and really needed and wanted to implement good Javascript testing (more on that later). While I will need to cover more types of testing I first wanted something easy to setup that felt familiar like back-end unit testing in other languages.
You may be asking yourself, what did you, or your teams, or teams you've been on use in the past for Javascript testing?
I am going to lift the banner of shame:
- For React/Node.js some did use Jest. I saw it but didn't always work on those projects in-depth. I was probably working more on the back-end for those, albeit did pick up those skills, but I trended toward Vue.js...for another post.
- With ASP.NET/.NET MVC/Static HTML (basically fill in the blank), and javascript libraries like jQuery...sometimes absolutely no unit testing whatsoever because a lot are basic fetch calls, or yes some could be fairly complex, used Javascript classes, modularization, etc. but you had a browser debugger, you had integration testing.
Sure, you made it easy to read, organized for good library and folder structures, etc. But testing was second or third to all of that. - And then there was good old fashioned custom Javascript tests where you really needed to make sure it wasn't going to blow up if someone changed that code.
After years of projects in different languages and frameworks, the focus has been more on the back-end (especially in my own experience) and absolutely, being a full stack developer, you have to know CSS, HTML, Javscript, and client side frameworks--be modern, and I love that--tweaking out the CSS, making my Javascript more performant, doing more with less (no pun intended and I do not...).
But testing? Testing has always not been at the forefront of my development.
And while I could be shamed--it's just been an opportunity to level up and do what I know I should be doing, as well as being able to pass on that knowledge to other developers who don't have that in their back pocket, or don't have those resources in their own companies or organizations (because not all places have dedicated front-end developers who focus solely on the client side--I have been lucky enough to have worked at places like that even if I did not pick up everything they were giving out at those times though).
So Now That The Above Is Done
I did not end up using Jest because of the experimental support for Javascript modules (aka ECMAScript Modules aka ESM) and I had heard that Vitest was a little faster.
And Jest failed me.
Because I tried it first which is when I found out it didn't have true support for ESM.
When I tried Jest (and just thought it would work, because I did not RTM on that part), I just thought to myself "And this is why I'm not doing this a lot because it should be much easier than this".
And yes, I should have read the docs on that part before I chose it--but it was easy and quick to try versus choosing a whole back-end framework where you should due your due diligence before choosing and implementing.
So Vitest it was and it worked flawlessly.
Make the test files, do the installs, update my package.json, make a vitest.config, open up a terminal in Visual Studio, and I was off with a simple "npm test".
And it was exactly what I wanted.
The output and seeing the tests, what failed, what passed was exactly what I was used to (overall) from a back-end coding perspective. And I didn't need to change any of my code or rely on a testing framework which was still experimental for ESM.
Since then I've found out and and read up more on Vitest (docs are great) and how it's really gaining support and being used (and yes, just in case you were wondering I am using Vite for my build as well).
I feel like I made a good choice, and more importantly--now I'm squarely in the game when it comes to Javascript and testing.
Vite and Vitest for the win.
