What is Vitest and why you should use it?

Hey there, fellow developer! 👋 Are you ready to dive into the world of Vitest? Don't worry if you're new to testing or if you've been using other testing frameworks. We're going to explore Vitest together, and by the end of this article, you'll be excited to give it a try!

What is Vitest?

Vitest is like a superhero for your code. It's a blazing fast unit test framework powered by Vite. But what does that mean for you?

🏎️ Speed: Vitest is incredibly fast, which means you spend less time waiting and more time coding.
🔧 Easy Setup: It works out-of-the-box with Vite, making it super easy to get started.
🔄 Watch Mode: It can automatically rerun your tests when you make changes.
🌈 Great Developer Experience: It has a clean, intuitive API that's fun to use.

Let's Get Started!

Imagine you're working on a new project. You've got some functions, and you want to make sure they're working correctly. Enter Vitest!

First, let's install Vitest:

npm install -D vitest

Now, let's say we have a simple function to test:

// math.js
export function add(a, b) {
  return a + b;
}

How do we test this with Vitest? It's super easy! Let's create a test file:

// math.test.js
import { expect, test } from 'vitest'
import { add } from './math'

test('addition works', () => {
  expect(add(2, 2)).toBe(4)
})

Wow, that was simple, right? Let's break it down:

We import expect and test from Vitest.
We import our add function.
We create a test using the test function.
Inside the test, we use expect to check if our function works correctly.

Running Your Tests

Ready to run your test? Just add this to your package.json:

{
  "scripts": {
    "test": "vitest"
  }
}

Now you can run your tests with:

npm run test

And voilà! You'll see your test results right in your terminal. 🎉

Let's Get Fancy: Watch Mode

But wait, there's more! Vitest has an awesome watch mode. It's like having a personal assistant who checks your code every time you make a change.

To use watch mode, just run:

npm run test -- --watch

Now, every time you save a file, Vitest will rerun your tests automatically. It's like magic! ✨

Question Time!

Let's make this interactive. Can you guess what this test does?

test('multiply function', () => {
  expect(multiply(3, 4)).toBe(12)
})

Take a moment to think about it...

Ready? This test is checking a multiply function to make sure it correctly multiplies 3 and 4 to get 12. Cool, right?

Your Turn!

Now it's your turn to write a test! Let's say we have this function:

export function isEven(number) {
  return number % 2 === 0
}

Can you write a test for this function? Try it out!

(Hint: You'll want to check both an even and an odd number)

Wrapping Up

Congratulations! You've just taken your first steps into the world of Vitest. 🎓 We've covered the basics, but there's so much more to explore:

Mocking functions and modules
Testing asynchronous code
Using Vitest with your favorite frameworks like React or Vue

Remember, testing isn't just about catching bugs. It's about writing better, more reliable code. And with Vitest, it can actually be fun!

So, are you ready to give Vitest a try in your next project? Trust me, your future self will thank you! 😉

Happy testing! 🚀✨

Blog