If you have heard of Vite, then you have probably heard of Vitest, the fast unit test framework built from it.
In this article, let’s explore what Vitest is, how to use it and why it can be the next test framework for your apps.
Before we get into Vitest, let’s note that Vite is a build tool that allows for faster server starts and updates thanks to its native ESM-based method to serve code on demand:
Note: Vite requires Node.js version 14.18+ or 16+.
This will start the process to create a Vite project. You can name your project and choose a template appropriately.
For this example, I will be choosing the Vanilla template and TypeScript:
$ npm create vite . ✔ Package name: … vitest ✔ Select a framework: › Vanilla ✔ Select a variant: › TypeScript
Scaffolding project in /tmp/vitest...
Done. Now run:
npm install npm run dev
As you see, after the project is created, you can install the necessary dependencies by running:
npminstall
Now, you should have the following project structure:
Now that our project is set up, let us write some simple tests.
Vitest has been designed based on Jest, so it shares a lot of similarities.
One of them is that it can automatically detect your test files as long as you name it in any of the 3 following formats:
A .js file in a folder named __tests__.
A file with a name like [name].spec.js.
A file with a name like [name].test.js.
So let’s create a new folder in our example project called tests and add a basic.test.js file:
If you have worked with other testing libraries such as Jest, Mocha or Jasmine, you should be familiar with the BDD (Behavior Driven Development) pattern.
It describes a function, explains what it does and uses test case(s) to assert that it works as intended.
By default, the tests run in watch mode so if you make any file changes, they will re-run immediately. If the tests are successful, you should see the terminal outputting:
$ npx vitest
DEV v0.27.2/tmp/vitest
✓tests/basic.test.js (1)
Test Files1 passed(1) Tests3 passed(3) Start at 15:05:07 Duration 933ms (transform 379ms, setup 0ms, collect 13ms, tests 2ms)
PASS Waiting for file changes... press h to show help, press q to quit
Vitest is often compared to Jest, another popular test framework.
It is because it is built on top of Jest, making it a more modern and improved version.
Also, it offers compatibility with most of the Jest API and ecosystem libraries, making it simple to migrate by following their official guide here.
Just like other widely used test frameworks such as Mocha and Jasmine, Vitest follows a simple describe-it-assert or describe-it-expect pattern.
The advantage of using Vitest over them is that it is fast to set up and does not require installing a separate assertion library.
The most convenient advantage of using Vitest is that it requires minimal configuration and can be used with any bundler.
You can define the configuration for your dev, build and test environments as a single pipeline under vite.config.js.
A simple example would be setting up a Jest and Babel environment for a React app.
Often, you would need to install additional packages besides the ones that come with CRA:
babel-jest,
@babel/core,
@babel/preset-env,
@babel/preset-react,
@babel/preset-typescript,
@types/jest.
After that, you would need a jest.config.js and a babel.config.js to complete setting up the configuration.
With Vitest, you don’t have to install those extra dependencies. All you need is a vite.config.js or vitest.config.js file.
Even for non-Vite projects, it is a single file to configure. For example:
Let’s say we add a new function in our counter.js:
// added another functionexportfunctionsetupCounter(element){
element.addEventListener('click',()=>{setCounter(counter++);
element.innerHTML =`count is ${counter}`;});}
If we run vitest run --coverage, we can see that not all our code has been tested:
$ vitest run --coverage
RUN v0.27.2/tmp/vitest Coverage enabled withc8
✓tests/counter.test.js (1)
Test Files1 passed(1) Tests1 passed(1) Start at 15:31:52 Duration 2.03s (transform 480ms, setup 0ms, collect 40ms, tests 2ms)
Another common testing we can do with Vitest is component testing, which verifies the functionality of individual components.
Let’s add an App.test.jsx to a React App. For this example, we’re using a non-Vite project (i.e. basic Create React App template) to show that Vitest works just as fine.
In this test, we want to test only the App component and here’s what our App.test.jsx will look like:
In this article, we learned about Vitest, a fast and modern unit testing framework powered by Vite.
Thanks for reading, I hope it has been a helpful article in getting you started with Vitest.
Please refer to the References section below if you would like to read more about Vitest and Vite. Cheers!