Vitest Browser Mode vs Jest jsdom
O Vitest browser mode roda testes de componente em um browser real; o Jest com jsdom os roda contra um DOM simulado e rápido.
O Jest com jsdom executa testes de componente em um DOM simulado e leve, o que é rápido e simples, mas não consegue reproduzir layout real, APIs verdadeiras do browser ou comportamento visual. O Vitest browser mode roda os mesmos testes em um browser de verdade (via providers Playwright/WebDriver), dando maior fidelidade para coisas que o jsdom simula (layout, eventos reais, CSS), ao custo de um setup mais pesado e execuções mais lentas. O jsdom ganha em velocidade e simplicidade; o Vitest browser mode ganha em fidelidade de browser real.
| Vitest Browser | Jest jsdom | |
|---|---|---|
| Ambiente | Browser real | DOM simulado (jsdom) |
| Fidelidade | Alta (APIs verdadeiras do browser) | Aproximada |
| Velocidade | Mais lenta (browser real) | Rápida |
| Setup | Precisa de provider de browser | Mínimo |
| Melhor para | Fidelidade de layout/visual | Testes de componente rápidos no nível de lógica |
Caso de uso e fidelidade
O Jest jsdom se encaixa em testes de componente rápidos, no nível de lógica, onde a renderização exata não importa. O Vitest browser mode se encaixa em testes que dependem de layout real, APIs verdadeiras do browser ou comportamento visual que o jsdom não consegue simular, aceitando um setup mais pesado e lento. Muitos times mantêm o grosso no jsdom e reservam o browser mode para casos de alta fidelidade.
Adequação a CI
O jsdom roda trivialmente no CI; o Vitest browser mode precisa de binários de browser (Playwright/WebDriver) instalados. Ambos rodam em managed runners, onde runners mais rápidos encurtam a instalação de browser e as etapas de teste em browser real.
O veredito
Precisa de testes de componente rápidos, no nível de lógica: Jest com jsdom (ou Vitest com jsdom). Precisa de layout real, APIs verdadeiras do browser ou fidelidade visual: Vitest browser mode. O jsdom é rápido e simples; o browser mode troca velocidade por fidelidade.