Vitest vs. Jest

Nolan Sullivan

September 30, 2024

Effective testing frameworks are essential in building reliable JavaScript applications, helping you minimize bugs and catch them early to keep your customers happy. Choosing the right testing framework saves hours of configuration hassles and improves developer experience.

This post compares Jest (opens in a new tab) and Vitest (opens in a new tab), popular JavaScript testing frameworks that support unit testing, integration testing, and snapshot testing (opens in a new tab).

Jest — created by the Facebook team, is the most widely used JavaScript testing framework.

Vitest — a fast-growing new testing framework. Originally built for Vite (opens in a new tab), the popular development server and JavaScript bundler, Vitest can now be used with any JavaScript project, not just those using Vite.

Which JavaScript testing framework is right for you?

Jest’s beginnings: From Facebook to open source

Popular React project starter Create React App (opens in a new tab) integrated Jest as its default testing framework in 2016 and Jest soon became the go-to testing tool for React developers. When Next.js, the most popular React framework, included built-in Jest configuration in version 12, Jest’s dominance in the React ecosystem was secured.

Ownership of Jest was transferred to the OpenJS Foundation (opens in a new tab) in 2022 and the framework is currently maintained by a core group of contributors external to Meta.

Jest features

test("Checkout link renders correctly", () => {
    .create(<Link page="http://www.instagram.com">Go to checkoutLink>)
  expect(tree).toMatchSnapshot();

The test (opens in a new tab) method runs a test. The Jest expect API (opens in a new tab) provides modifier and matcher (assertion) methods that simplify checking whether a value is what you expect it to be. Among the matcher methods available are:

• toBe()
• toHaveProperty()
• toMatchSnapshot()

Jest’s extensive set of modifiers and matchers makes error messages more detailed, helping you pinpoint why a test fails. The jest-extended (opens in a new tab) library, maintained by the Jest community, provides additional matchers to expand testing functionality.

You can use Jest’s mock functions (opens in a new tab) to mock objects, function calls, and even npm modules for faster testing without relying on external systems. This is especially useful for avoiding expensive function calls like calling a credit card charging API in the checkout process of an app.

To run code before and after tests run, Jest provides handy setup and teardown functions (opens in a new tab): beforeEach, afterEach, beforeAll, and afterAll.

  return initializeCityDatabase();
  return clearCityDatabase();

  initializeCityDatabase();
test("city database has Vienna", () => {
  expect(isCity("Vienna")).toBeTruthy();
test("city database has San Juan", () => {
  expect(isCity("San Juan")).toBeTruthy();

When running tests, you can add the --watch flag to only run tests related to changed files.

While Vitest doesn’t have Jest’s Interactive Snapshot Mode (opens in a new tab), which enables you to update failed snapshots interactively in watch mode, this feature has been added to Vitest’s TODO list (opens in a new tab).

Jest also has a multi-project runner for running tests across multiple projects, each with their own setup and configuration, using a single instance of Jest.

Getting started with Jest

npm install --save-dev jest

const sum = require("./sum");
test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);

✓ adds 1 + 2 to equal 3 (5ms)

The origin of Vitest: The need for a Vite-native test runner

Vitest features

Vitest has built-in ES module, TypeScript, JSX, and PostCSS support and many of the same features as Jest, like the expect API, snapshots, and code coverage. Vitest’s Jest-compatible API makes migrating from Jest easy. Take a look at the differences between the frameworks in the migrating from Jest guide (opens in a new tab) in the Vitest docs.

In contrast to Jest, Vitest uses watch mode by default for a better developer experience. Vitest searches the ES module graph and only reruns affected tests when you modify your source code, similar to how Vite’s HMR works in the browser. This makes test reruns fast – so fast that Vitest adds a delay before displaying test results in the terminal so that developers can see that the tests were rerun.

Vitest supports Happy DOM (opens in a new tab) and jsdom (opens in a new tab) for DOM mocking. While Happy DOM is more performant than jsdom, which is used by Jest, jsdom is a more mature package with a more extensive API that closely emulates the browser environment.

When running tests, Vitest runs a Vite dev server that provides a UI for managing your tests.

To view the UI, install @vitest/ui and pass the --ui flag to the Vitest run command:

Take a look at the StackBlitz Vitest Basic Example (opens in a new tab) for a live demo of the Vitest UI. At Speakeasy, we’ve found Vitest’s UI to be a valuable tool for debugging.

Vitest also has Rust-like in-source testing (opens in a new tab) that lets you run tests in your source code:

export function add(...args: number[]) {
  return args.reduce((a, b) => a + b, 0)
if (import.meta.vitest) {
  const { it, expect } = import.meta.vitest
    expect(add(1, 2, 3)).toBe(6)

While using separate test files is recommended for more complex tests, in-source testing is suitable for unit testing small functions and prototyping, making it especially useful for writing tests for JavaScript libraries.

Vitest’s recent experimental browser mode (opens in a new tab) feature allows you to run tests in the browser, instead of simulating them in Node.js. WebdriverIO (opens in a new tab) is used for running tests, but you can use other providers. You can also browse in headless mode using WebdriverIO or Playwright (opens in a new tab). Vitest developed browser mode to improve test accuracy by using a real browser environment and streamline test workflows, but you may find browser mode slower than using a simulated environment as it needs to launch a browser, handle page rendering, and interact with browser APIs.

Other experimental features include type testing (opens in a new tab) and benchmarking (opens in a new tab).

Getting started with Vitest

npm install --save-dev vitest

import { expect, test } from "vitest";
import { sum } from "./sum.js";
test("adds 1 + 2 to equal 3", () => {
  expect(sum(1, 2)).toBe(3);

Compared to Jest, this basic test is a little different. Vitest uses ES module imports, and for the sake of explicitness, it does not provide global APIs like expect and test by default. You can configure Vitest to provide global APIs (opens in a new tab) if you prefer or are migrating from Jest.

Add the following script to your package.json file:

Run the test using the following command:

Vitest finds the files and runs them, and will print the following message in your terminal if the test passes:

  ✓ adds 1 + 2 to equal 3

Note that Vitest starts in watch mode by default in a development environment.

Choosing between Vitest and Jest

Performance

Performance comparisons of Vitest and Jest have delivered conflicting results, as the outcome depends on what you’re testing and how you configure the testing tool. One blog post reports that Jest is faster than Vitest (opens in a new tab) when running all the tests for the author’s blog website. Another comparison (opens in a new tab), which performed 1,256 unit tests on a production web app that uses Vite and Vue, found that Vitest was faster than Jest in most tests. Yet another comparison (opens in a new tab) found Jest to be almost twice as fast as Vitest for testing a production app. Ideally, benchmark your own tests to see which testing tool is faster for your use case, or make a choice based on other factors as the performance differences may not be significant.

Even if your benchmarking finds Jest is faster than Vitest, there are ways to improve Vitest’s performance, as explained in the improving performance guide (opens in a new tab) in the Vitest docs.

For example, you can disable test isolation (opens in a new tab) for projects that don’t rely on side effects and properly clean up their state, which is often the case for projects in a node environment.

In watch mode, Vitest often outperforms Jest when rerunning tests, as it only reruns tests affected by code changes. While Jest also only reruns changed tests in watch mode, it relies on checking uncommitted Git files, which can be less precise, as not all detected changes may be relevant to the tests you’re running.

Developer experience

Both Jest and Vitest have comprehensive, well-organized, and easy-to-search documentation. The Jest docs include guides for specific types of tests such as timer mocks (opens in a new tab) and using Jest with other libraries, databases, web frameworks, and React Native. Vitest’s getting started guide (opens in a new tab) sets it apart. It includes StackBlitz examples that you can use to try Vitest in the browser without setting up a code example yourself. The getting started guide also has example GitHub repos and StackBlitz playgrounds for using Vitest with different web frameworks.

Vitest’s ES module support gives it a significant advantage over Jest, which only offers experimental support for ES modules (opens in a new tab).

Jest uses Babel (opens in a new tab) to transpile JavaScript ES Modules to CommonJS, using the @babel/plugin-transform-modules-commonjs (opens in a new tab) plugin. By default, Babel excludes Node.js modules from transformation, which may be an issue if you use an ES-module-only library (opens in a new tab) like react-markdown (opens in a new tab), in which case you’ll get this commonly seen error message:

SyntaxError: Unexpected token 'export'

To fix this issue, use the transformIgnorePatterns (opens in a new tab) option in your jest.config.js file to specify that the Node module is an ES module package that needs to be transpiled by Babel:

/** @type {import('jest').Config} */
  "transformIgnorePatterns": [
    "node_modules/(?!(react-markdown)/)"

Jest supports TypeScript using Babel, which requires some configuration (opens in a new tab).

Overall, Jest requires some configuration to work with ES modules and TypeScript, which work out of the box with Vitest. Less configuration means happier developers.

RedwoodJS (opens in a new tab), the full-stack, open-source web framework, is in the process of migrating from Jest to Vitest (opens in a new tab). The RedwoodJS team found Vitest much better suited to working with ES modules compared to Jest.

Community and ecosystem

While npm trends (opens in a new tab) show that Jest is downloaded more frequently than Vitest, Vitest usage is rapidly increasing, outpacing Jest in growth.

According to the State of JS 2023 survey (opens in a new tab), Vitest has seen a rapid rise in popularity and positive opinions between 2021 and 2023. By contrast, Jest experienced a rapid rise in popularity and positive opinions between 2016 and 2020, but this momentum slowed between 2021 and 2023, with opinions becoming more mixed. This shift may be due to developers adopting Vitest, which solves one of the main pain points of Jest: ES Module support.

Vite and Vitest claimed many of the top spots in the survey (opens in a new tab), while Jest made an appearance as the second most most-loved library, after Vite.

Of the four most popular JavaScript frontend frameworks and libraries, two use Jest, and two use Vitest. React uses Jest and Angular added experimental Jest support in 2023 with the release of Angular version 16 to modernize its unit testing.

Jest’s popularity and the fact that it’s been around for longer means there are more blog posts and Stack Overflow questions about Jest (opens in a new tab) than Vitest (opens in a new tab), which is useful for figuring out uncommon testing situations and debugging.

Many large companies use Jest, but Vitest is gaining traction in prominent projects (opens in a new tab), including frameworks like Vue and Svelte. Many of the projects using Vitest are built with Vue. This is no surprise, as Evan You, the creator of Vue, also created Vite, and one of Vite’s core team members developed Vitest.

For React developers, Jest’s compatibility with mobile development using React Native and Expo (opens in a new tab) is an important advantage. React Native and Expo testing documentation recommend using Jest, and Expo provides the jest-expo (opens in a new tab) library to simplify testing for Expo and React Native apps.

Vitest, meanwhile, offers support for React Native using the vitest-react-native (opens in a new tab) library, which is developed by a Vitest team member and is a work in progress.

Vitest is under more rapid development than Jest, as can be seen by the number of recent commits to the Vitest GitHub repo (opens in a new tab) compared to the Jest GitHub repo (opens in a new tab).

Recently, Evan You founded VoidZero (opens in a new tab), a company building an open-source, unified development toolchain by bringing together some of the most popular JavaScript toolchain libraries: Vite, Vitest, Rolldown, and Oxc. With $4.6 million in seed funding, VoidZero is likely to accelerate Vitest’s development and boost its popularity.

Using with Vite

Jest is not fully supported by Vite, but you can get it to work using the vite-jest library, with some limitations (opens in a new tab).

Using Jest with Vite adds complexity as you need to manage testing and building your app as separate processes. However, Angular uses Vite and Jest. The Angular team considered using Vitest but chose Jest because of its widespread adoption among Angular developers and its maturity.

Migrating from Jest to Vitest: Insights from our experience at Speakeasy

Adding automated API testing for Speakeasy-created SDKs using Vitest

We are now in the process of expanding our use of Vitest to our customers’ Speakeasy-generated SDKs with an automated API testing feature (opens in a new tab) that generates API tests that will help you make more robust and performant APIs, faster and cheaper. Our own internal SDKs have Vitest tests, which we used to add this feature.

EARLY ACCESS

Test generation is currently available in Typescript, Python, and Go. Customers can enable test generation in a generated Speakeasy SDK using their OpenAPI doc or using a tests.yaml file. We have plans to further improve testing including:

• Providing a mock server to run the generated tests against.
• Adding integration with CI/CD using our GitHub Action.
• Adding support for more languages.
• Adding end-to-end testing using the Arazzo specification (opens in a new tab), which allows for more complex testing scenarios.
• Integration with the Speakeasy web app.

Conclusion: Which testing framework is better?