CodePark/ questions / Jest & Vitest
START PRACTICINGPRACTICE
Frontend question · Testing › Jest & Vitest

Jest or Vitest: how do they differ, and what does the jsdom test environment do?

Jest and Vitest are test runners with almost the same API. The main difference is how they build and run your code. The jsdom environment gives your tests a fake browser DOM inside Node.

What they share: describe, test, expect, mock functions, module mocking and fake timers.

How they differ:

  • Jest uses jest.* functions. It transforms your code with Babel or SWC (a fast compiler written in Rust).
  • Vitest uses vi.* functions. It runs on Vite's build pipeline, so it reuses your Vite config.
  • Vitest supports ESM (ES modules, the import/export syntax) and TypeScript natively. It is usually faster to start.
  • Vitest does not create global functions unless you set globals: true. So you import describe and expect from vitest.

Neither runner uses a browser by default. Component tests need a DOM, so you set the environment to jsdom:

  • In Jest: testEnvironment: 'jsdom'. This needs the jest-environment-jsdom package.
  • In Vitest: environment: 'jsdom'.

jsdom implements the DOM in Node. It has no layout: it never calculates where elements sit or how big they are. So element sizes and scrolling are not real.

  • Jest and Vitest share the same ideas: describe, test, expect, mocks and fake timers.
  • Jest uses jest.*, and Vitest uses vi.*. Vitest reuses the Vite config and is ESM-first.
  • Vitest globals are off by default, so you import describe and expect.
  • The jsdom environment gives component tests a simulated DOM in Node.
  • jsdom has no layout or real rendering, so sizes and scrolling are not real.