Vitest - Jest Alternative powered by Vite

Why Vitest

This guide assumes that you are familiar with Vite. A good way to start learning more is to read the Why Vite Guide, and Next generation frontend tooling with ViteJS, a stream where Evan You did a demo explaining the main concepts.

The need for a Vite native test runner

Vite's out-of-the-box support for common web patterns, features like glob imports and SSR primitives, and its many plugins and integrations are fostering a vibrant ecosystem. Its dev and build story are key to its success. For docs, there are several SSG-based alternatives powered by Vite. Vite's Unit Testing story hasn't been clear though. Existing options like Jest were created in a different context. There is a lot of duplication between Jest and Vite, forcing users to configure two different pipelines.

Using Vite dev server to transform your files during testing, enables the creation of a simple runner that doesn't need to deal with the complexity of transforming source files and can solely focus on providing the best DX during testing. A test runner that uses the same configuration of your App (through vite.config.js), sharing a common transformation pipeline during dev, build, and test time. That is extensible with the same plugin API that lets you and the maintainers of your tools provide first-class integration with Vite. A tool that is built with Vite in mind from the start, taking advantage of its improvements in DX, like its instant Hot Module Reload (HMR). This is Vitest, a blazing fast unit-test framework powered by Vite.

Given Jest's massive adoption, Vitest provides a compatible API that allows you to use it as a drop-in replacement in most projects. It also includes the most common features required when setting up your unit tests (mocking, snapshots, coverage). Vitest cares a lot about performance and uses Worker threads to run as much as possible in parallel. Some ports have seen test running an order of magnitude faster. Watch mode is enabled by default, aligning itself with the way Vite pushes for a dev first experience. Even with all these improvements in DX, Vitest stays lightweight by carefully choosing its dependencies (or directly inlining needed pieces).

Vitest aims to position itself as the Test Runner of choice for Vite projects, and as a solid alternative even for projects not using Vite.

Vitest vs Jest

Jest took over the Testing Framework space by providing out-of-the-box support for most JavaScript projects, a comfortable API (it and expect), and the full pack of testing features that most setups would require (snapshots, mocks, coverage). We are thankful to the Jest team and community for creating a delightful testing API and pushing forward a lot of the testing patterns that are now a standard in the web ecosystem. It is possible to use Jest in Vite setups. @sodatea is building vite-jest, which aims to provide first-class Vite integration for Jest. The last blockers in Jest have been solved so this is a valid option for your unit tests. However, in a world where we have Vite providing support for the most common web tooling (typescript, JSX, most popular UI Frameworks), Jest represents a duplication of complexity. If your app is powered by Vite, having two different pipelines to configure and maintain is not justifiable. With Vitest you get to define the configuration for your dev, build and test environments as a single pipeline, sharing the same plugins and the same vite.config.js. Even if your library is not using Vite (for example, if it is built with esbuild or rollup), Vitest is an interesting option as it gives you a faster run for your unit tests and a jump in DX thanks to the default watch mode using Vite instant Hot Module Reload (HMR). Vitest offers compatibility with most of the Jest API and ecosystem libraries, so in most projects, it should be a drop-in replacement for Jest.

Vitest Features

• Vite's config, transformers, resolvers, and plugins. Use the same setup from your app!
• Jest Snapshot
• Chai built-in for assertions, with Jest expect compatible APIs.
• Smart & instant watch mode, like HMR for tests!
• Native code coverage via c8
• Tinyspy built-in for mocking, stubbing, and spies.
• JSDOM and happy-dom for DOM and browser API mocking
• Components testing (Vue, React, Lit, Vitesse)
• Workers multi-threading via tinypool (a lightweight fork of Piscina)
• ESM first, top level await
• Out-of-box TypeScript / JSX support
• Filtering, timeouts, concurrent for suite and tests

Vitest Example

import { it, describe, expect, assert } from 'vitest'describe('suite name', () => {  it('foo', () => {    expect(1 + 1).toEqual(2)    expect(true).to.be.true  })  it('bar', () => {    assert.equal(Math.sqrt(4), 2)  })  it('snapshot', () => {    expect({ foo: 'bar' }).toMatchSnapshot()  })})

• Vitest Documentaion