Testing
Vitest
A fast Vite-based test runner with a Jest-compatible API and native TypeScript and ESM support.
What it is
Anthony Fu and Vladimir (together with the Vue and Vite team) created Vitest in 2021. It reuses the same config and plugins as Vite, so tests see the same aliases and transforms as the app.
The API nearly matches Jest (describe, it, expect, vi.fn), so migration is easy. It has watch mode with instant reruns, native TypeScript and ESM with no setup, coverage via v8 or istanbul, and a browser mode.
Vitest fits projects on Vite, Vue, Svelte and React. It is faster than Jest in many scenarios thanks to parallelism and reusing the Vite cache.
Use it when
- A Vite project: one config for build and tests.
- You need native TypeScript and ES module support without Babel.
- Migrating from Jest with minimal changes.
Avoid it when
- React Native, where tooling is centered on Jest.
- A non-Vite project with many Jest-specific plugins.
Key concepts
- Vite config reuse
- Aliases, plugins and env variables come from
vite.config. - vi utility
vi.fn,vi.mockandvi.useFakeTimersfor mocks and timers.- Watch mode
- Reruns only the tests affected by a change.
- In-source testing
- Tests can be written next to the code in the same file.
- Browser mode
- Run tests in a real browser for components.
Example
Interview questions
1. How does Vitest differ from Jest?
Vitest runs on Vite, natively understands ESM and TypeScript and uses the build config. Jest is older with a bigger ecosystem but needs extra setup for ESM.
2. How do you migrate tests from Jest?
Replace
jestwithviin mocks, add imports fromvitestor enableglobals. Mostexpectmatchers work unchanged.3. What is in-source testing?
The ability to write tests in the same file as the code, inside an
if (import.meta.vitest)block. The block is stripped from the build.4. How do you collect coverage?
Run
vitest run --coveragewith the v8 or istanbul provider. The report shows which lines and branches ran.
Interview questions from the bank
- Coverage is 92 %, CI has a 90 % threshold, yet a bug in the discount calculation reached production. The buggy line was executed by a test; the test just did not check anything about the result. What do you propose to the team?JuniorTesting
- This test is green although
fetchUser(-1)actually returns data, not an error:it('rejects bad id', () => { expect(fetchUser(-1)).rejects.toThrow() }). Why, and how do you fix it?JuniorTesting - A file has 14 nearly identical tests for a phone number validator, copied from one another. A new rule needs changes in all 14. How do you rework it, and when does that approach do harm?JuniorTesting
- A frontend team has 2000 unit tests with shallow rendering and mocks, yet bugs in forms and API handling still reach users. Where do you shift the testing effort, and why?MiddleTesting
- A test for
registerUsermocks the repository, the mailer and the logger and checksexpect(repo.save).toHaveBeenCalledWith(...)and the call order. After a refactor that did not change behaviour, 30 tests fail. What is wrong with the tests, and which test doubles belong where?MiddleTesting - The test 'the trial ends after 14 days' passes locally but fails in CI every evening after 21:00 and on the last day of the month. What is wrong with it, and how do you test time dependent code?MiddleTesting
- The API client tests mock
fetchwithvi.fn().mockResolvedValue({ json: () => data }). When the API started returning 404 with an HTML page, the app crashed in production withUnexpected token <, while the tests stayed green. How do you replace the network so tests catch this kind of thing?MiddleTesting - A PR changes a button colour and updates 140 snapshot files, and the reviewer approves without reading. A week later it turns out a price disappeared in one of the snapshots. What is wrong with snapshots in this project, and how should they be used?MiddleTesting
Comparisons with this technology
Related technologies
- JestA testing framework for JavaScript and TypeScript: runner, assertions, mocks and coverage in one package.
- ViteA fast dev server and bundler for frontend, built on native ES modules.
- VueA progressive UI framework with templates and reactivity and a low barrier to entry.
- PlaywrightA framework for end-to-end tests and browser automation: Chromium, Firefox and WebKit from one API.
Logos belong to their owners and are used for identification only. Icons: Simple Icons (CC0), Devicon (MIT).