Logo

dev-resources.site

for different kinds of informations.

Migration from Jest to Vitest: A Real-World Experience with 2900+ Tests

Published at
12/18/2024
Categories
testing
react
vitest
jest
Author
56_kode
Categories
4 categories in total
testing
open
react
open
vitest
open
jest
open
Author
7 person written this
56_kode
open
Migration from Jest to Vitest: A Real-World Experience with 2900+ Tests

We recently completed a migration from Jest to Vitest in our React/TypeScript project. Here's our complete feedback, good and bad, no marketing talk.

Why We Migrated

Our test suite was growing (2900+ tests), and we faced recurring issues with Jest:

  • Random freezes requiring --max-workers flag
  • ESM compatibility nightmares
  • Complex configuration to handle modern packages
  • High memory consumption

What We Learned

  1. ESM Support is a Game Changer
    No more complicated transpilation config! We removed 20+ lines of module transformation rules.

  2. Performance Surprises
    The speed gains weren't exactly what we expected. Some tests run faster, others slower, and it varies by machine (30s to 5min on different computers).

  3. Hidden Issues Revealed
    Vitest caught empty snapshots that Jest was silently passing. Some of our tests were green... but testing nothing! 🤔

  4. i18n Optimization
    By properly mocking i18next, we divided some test execution times by 3. Worth the effort!

Quick Wins

  • Happy DOM instead of jsdom: Almost 1 minute saved
  • Direct ESM support: Cleaner configuration
  • Better error detection: No more false positives

Main Challenges

  • Portal handling requires specific mocks
  • Default exports need explicit configuration
  • Some tests needed adaptation for stricter checks
  • Translation mocking was complex but worth it

Our complete guide includes all configurations, code examples, and detailed solutions.

Want all the details? Check the full article here:https://www.56kode.com/posts/migration-from-jest-to-vitest/

jest Article's
30 articles in total
Favicon
Why You Hate Test Coverage
Favicon
Mockando Constantes em Testes com Jest: Um Exemplo Prático
Favicon
Taming the CI Beast: Optimizing a Massive Next.js Application (Part 1)
Favicon
Testing a GraphQL Application with Jest and SuperTest
Favicon
[Boost]
Favicon
How to write unit test in react?
Favicon
4. Testing (async) searchParams with Jest in Next 15
Favicon
3. How to setup Jest in a Next 15 project (+ eslint for testing)
Favicon
Sharding Jest tests. Harder than it should be?
Favicon
Migration from Jest to Vitest: A Real-World Experience with 2900+ Tests
Favicon
Mastering Jest: A Guide to Efficient JavaScript Testing
Favicon
Guide - Setting Up Jest for Unit Testing in a TypeScript React Project
Favicon
Testes Unitários com Jest
Favicon
5. Mocking usePathName, useSearchParams and useRouter with Jest in Next 15
Favicon
🛠️ Writing Reliable Code from the Ground Up !
Favicon
How To Test Your JavaScript Application With Jest Framework?
Favicon
Mocking with Jest and typescript - a cheatsheet
Favicon
Mastering Testing in React with Jest and React Testing Library
Favicon
Exploring Snapshot Testing in Jest: Pros and Cons
Favicon
Implementing CI with GitHub Actions Workflow
Favicon
How to write jest test cases for react component?
Favicon
Testing LLM Applications: Misadventures in Mocking SDKs vs Direct HTTP Requests
Favicon
Creating tests in real database with NestJS, TypeORM and PostgreSQL
Favicon
Let’s Make Jest Run Much Faster
Favicon
Testing and Debugging: Basic Tools and Techniques for Effective Full-Stack Tests
Favicon
Comparing Jest, React Testing Library, and Playwright: Testing Approaches for React Applications
Favicon
Error in Jest integration with Vue js
Favicon
Declarative Programming
Favicon
Maximize a Performance dos Seus Testes com Jest e Vitest
Favicon
Introduction to Jest: Unit Testing, Mocking, and Asynchronous Code

Featured ones: