snippetjavascriptTip
Kickstart a JavaScript project with Test-Driven Development
Viewed 0 times
javascriptkickstartprojectdevelopmenttestdrivenwith
Problem
I recently decided to try out Test-Driven Development (TDD) for a small project. While I've had some experience with the methodology before, I've never tried bootstrapping a project with it from the start.
Test-Driven Development, often referred to as TDD, is a software development methodology that relies on writing tests before writing the actual code. The idea is to define the desired behavior of the code through tests and then write the code to achieve that behavior. This approach transforms the traditional development process, by making testing an integral part of the coding cycle rather than an afterthought.
In short, in TDD, we test first, code later. This is in contrast to the traditional approach of coding first and testing later, or not at all.
I decided to use Vitest for this project. It's the tool I've settled on, after trying the likes of Jest and Mocha. It feels faster and, in my experience, it's easier to set up and configure than its counterparts.
> [!TIP]
Test-Driven Development, often referred to as TDD, is a software development methodology that relies on writing tests before writing the actual code. The idea is to define the desired behavior of the code through tests and then write the code to achieve that behavior. This approach transforms the traditional development process, by making testing an integral part of the coding cycle rather than an afterthought.
In short, in TDD, we test first, code later. This is in contrast to the traditional approach of coding first and testing later, or not at all.
I decided to use Vitest for this project. It's the tool I've settled on, after trying the likes of Jest and Mocha. It feels faster and, in my experience, it's easier to set up and configure than its counterparts.
> [!TIP]
Solution
It also comes with a lot of very convenient [matchers](https://vitest.dev/api/expect.html), [mocking](https://vitest.dev/api/mock.html) and pretty much everything you'd expect from a modern testing library.In short, in TDD, we test first, code later. This is in contrast to the traditional approach of coding first and testing later, or not at all.
I decided to use Vitest for this project. It's the tool I've settled on, after trying the likes of Jest and Mocha. It feels faster and, in my experience, it's easier to set up and configure than its counterparts.
> [!TIP]
>
> I didn't really have to configure anything for this project, as I was using native ES modules and, later in the development cycle, Vite, which works great with Vitest out of the box.
As far as syntax is concerned, there's nothing particularly special about Vitest. In fact, it's practically the same as every other testing library, using the classic trinity of
describe, test (aliased conveniently as it), and expect for assertions.Code Snippets
It also comes with a lot of very convenient [matchers](https://vitest.dev/api/expect.html), [mocking](https://vitest.dev/api/mock.html) and pretty much everything you'd expect from a modern testing library.I especially like the [`test.each()`](https://vitest.dev/api/#test-each) and [`describe.each()`](https://vitest.dev/api/#describe-each) functions, which allow you to **run the same test with different parameters**, sparing you the hassle of repeating the same assertions over and over again.### Custom matchers
One thing I want to mention is how easy it was to [roll up my own **custom matcher**](https://vitest.dev/guide/extending-matchers.html). As my project is centered around regular expressions, I wanted a matcher that would easily check if an expression matches a given string.
Surprisingly, this only took me about **10 lines of code**:Context
From 30-seconds-of-code: test-driven-development-intro
Revisions (0)
No revisions yet.