Vitest Tutorial: Setting Up Unit Testing in JavaScript

Learn how to set up and use Vitest, a modern JavaScript and TypeScript testing framework. This guide is a step-by-step tutorial for beginners interested in starting their unit testing journey with Vitest.

Prerequisites for Using Vitest

Before starting with Vitest, ensure you meet the following requirements:

prerequisites

Have Node.js version 20 or newer installed.
Create a JavaScript project directory with appropriate folders (e.g., src for source files and test for test files).
Be familiar with basic terminal navigation and commands.

Step-by-Step: Setting Up Vitest

Follow these steps to install and configure Vitest in your JavaScript project.

steps

Create a project directory and navigate into it:
bash
```
mkdir vitest-unit-testing
cd vitest-unit-testing
```
Initialize the project with npm:
bash
```
npm init -y
```
Install Vitest as a development dependency:
bash
```
npm install -D vitest
```
Open the package.json file and add a test script under the scripts section:
json
```
{
  "scripts": {
    "test": "vitest"
  }
}
```
Run the test script to ensure Vitest is properly installed:

bash

   npm run test
   # > vitest
   # No test files found...

Installing Node.js 20+ for Vitest

Vitest requires Node.js version 20 or newer. Follow these steps to install or update Node.js on your system:

compatibility

Node.js 20+

Visit the official Node.js website.
Download and install the latest stable release (ensure it's version 20 or newer).
Verify the installation:

bash

   node -v
   # Ensure the output is 20.0.0 or newer.

Update Node.js if the version is below 20 by downloading the latest installer from the official site.

Configuring Vitest for Your JavaScript Project

After installing Vitest, configure your testing environment in the project.

Add the following test script to your package.json file:
json
```
{
  "scripts": {
    "test": "vitest"
  }
}
```
Use the npm run test command to execute tests throughout your project. By default, Vitest will identify files matching the pattern *.test.js or *.spec.js in any directory.

Development Dependencies Explained

Vitest is installed with the -D flag (as a development dependency) because it is only required during development and testing, not in production. This distinction ensures that the final build is lean and does not include unnecessary tools.

Verifying Your Test Setup

Run the following command to confirm your setup is complete:

Running Test Script

npm run test
# > vitest
# No test files found, exiting with code 1

If you encounter the "No tests found" output, your environment is configured correctly, but test files are not available yet. You’re now ready to begin writing your first tests.

Why Choose Vitest Over Other Testing Frameworks?

comparison

Vitest

Built for modern JavaScript and TypeScript.
Supports ES modules without extra configuration.
Faster test execution with minimal boilerplate.

Jest

Well-established and widely adopted.
Rich ecosystem and plugins.
May require additional configuration for ES modules.

If you're using Vite in your project, Vitest is often the better choice due to its native integration and toolchain compatibility.

FAQ

What is Vitest used for?

Vitest is a modern testing framework designed for JavaScript and TypeScript projects. It's particularly suited for running fast and reliable unit tests.

How is Vitest different from Jest?

Vitest offers faster execution, built-in compatibility with modern JavaScript features, and seamless integration with Vite, making it an excellent choice for developers working on modern applications.

Do I need Node.js to use Vitest?

Yes, Vitest requires Node.js version 20 or newer to function. You can download the latest version from the official Node.js website if you're using an older version.

Related guides