Comparações com Outros Test Runners

Jest

Jest conquistou o espaço dos Frameworks de Teste ao oferecer suporte nativo para a maioria dos projetos JavaScript, uma API amigável (it e expect), e o conjunto completo de recursos de teste que a maioria das configurações exigiria (snapshots, mocks, cobertura). Somos gratos à equipe e comunidade Jest por criar uma API de teste prazerosa e promover muitos dos padrões de teste que agora são referência no ecossistema web.

É possível usar Jest em configurações Vite. @sodatea construiu vite-jest, que visa fornecer integração Vite de primeira classe para Jest. Os últimos impedimentos no Jest foram resolvidos, então esta é uma opção válida para seus testes de unidade.

No entanto, em um mundo em que temos Vite fornecendo suporte para as ferramentas web mais comuns (TypeScript, JSX, os frameworks de UI mais populares), Jest duplica a complexidade. Se seu aplicativo é baseado em Vite, ter dois pipelines diferentes para configurar e manter não é justificável. Com Vitest, você define a configuração para seus ambientes de desenvolvimento, build e teste como um único pipeline, compartilhando os mesmos plugins e o mesmo vite.config.js.

Mesmo que sua biblioteca não esteja usando Vite (por exemplo, se ela for construída com esbuild ou Rollup), Vitest é uma opção interessante, pois oferece uma execução mais rápida dos seus testes de unidade e melhora significativamente a experiência do desenvolvedor (DX) graças ao modo de monitoramento padrão usando o Hot Module Reload (HMR) instantâneo do Vite. Vitest oferece compatibilidade com a maioria das APIs Jest e bibliotecas do ecossistema, então na maioria dos projetos, deve ser um substituto simples para Jest.

Cypress

Cypress é um executor de testes baseado em navegador e uma ferramenta complementar ao Vitest. Se você deseja usar Cypress, sugerimos usar Vitest para toda a lógica sem interface gráfica em sua aplicação e Cypress para toda a lógica que interage com o navegador.

Cypress é conhecido como uma ferramenta de teste end-to-end, mas seu novo executor de testes de componentes oferece um ótimo suporte para testar componentes Vite e é uma escolha ideal para testar qualquer elemento que seja renderizado em um navegador.

Runners de teste baseados em navegador, como Cypress, WebdriverIO e Web Test Runner, identificarão problemas que o Vitest não consegue, porque eles usam o navegador e suas APIs de forma nativa.

O driver de testes do Cypress foca em determinar se os elementos estão visíveis, acessíveis e interativos. O Cypress é construído especificamente para desenvolvimento e teste de UI e sua DX gira em torno da testagem de seus componentes visuais. Você vê seu componente renderizado ao lado do relator de testes. Após a conclusão do teste, o componente permanece interativo e você pode depurar quaisquer falhas que ocorram usando as ferramentas de desenvolvedor do navegador.

Em contraste, o Vitest é focado em oferecer a melhor DX possível para testes headless (sem interface gráfica) ultrarrápidos. Runners de teste baseados em Node, como o Vitest, suportam vários ambientes de navegador parcialmente implementados, como o jsdom, que oferecem o necessário para testar rapidamente qualquer código que faça referência a APIs do navegador. A contrapartida é que esses ambientes de navegador têm limitações no que podem implementar. Por exemplo, o jsdom carece de vários recursos como window.navigation ou um motor de layout (offsetTop, etc).

Por fim, em contraste com o Web Test Runner, o executor de testes do Cypress se assemelha mais a um IDE do que um executor de testes, porque você também vê o componente real renderizado no navegador, junto com seus resultados de teste e logs.

Cypress também tem integrado Vite em seus produtos: reconstruindo a UI de seu aplicativo usando Vitesse e usando Vite para impulsionar o desenvolvimento de seu projeto.

Acreditamos que o Cypress não é a melhor opção para testes de unidade de código headless, mas que usar Cypress (para E2E e Teste de Componentes) e Vitest (para testes de unidade) atenderia às necessidades de teste do seu aplicativo.

WebdriverIO

WebdriverIO é, assim como o Cypress, um executor de testes alternativo baseado em navegador e uma ferramenta complementar ao Vitest. Ele pode ser usado como uma ferramenta de teste end-to-end, bem como para testar componentes web. Ele inclusive utiliza componentes do Vitest nos bastidores, por exemplo, para mocking e stubbing dentro de testes de componentes.

WebdriverIO oferece as mesmas vantagens do Cypress, permitindo que você teste sua lógica em um navegador de verdade. No entanto, ele usa padrões web genuínos para automação, o que supera algumas das desvantagens e limitações ao executar testes no Cypress. Além disso, ele permite que você execute testes em dispositivos móveis também, possibilitando testar sua aplicação em ainda mais ambientes.

Web Test Runner

@web/test-runner executa testes em um navegador headless, fornecendo o mesmo ambiente de execução que sua aplicação web sem a necessidade de simular APIs do navegador ou o DOM. Isso também torna possível depurar dentro de um navegador real usando as ferramentas de desenvolvimento, embora não haja uma interface visual exibida para acompanhar o teste passo a passo, como há nos testes do Cypress.

Para usar @web/test-runner com um projeto Vite, use @remcovaes/web-test-runner-vite-plugin. @web/test-runner não inclui bibliotecas de asserção ou mocking, então você é responsável por adicioná-las.

uvu

uvu é um executor de testes para Node.js e o navegador. Ele executa testes em uma única thread, então os testes não são isolados e podem afetar outros arquivos. Vitest, no entanto, usa workers para isolar testes e executá-los em paralelo.

Para transformar seu código, uvu depende de mecanismos de require e loader. Vitest usa Vite, então os arquivos são transformados aproveitando toda a capacidade do sistema de plugins do Vite. Em um mundo em que temos Vite fornecendo suporte para as ferramentas web mais comuns (TypeScript, JSX, os frameworks de UI mais populares), uvu duplica a complexidade. Se seu aplicativo é baseado em Vite, ter dois pipelines diferentes para configurar e manter não é justificável. Com Vitest, você define a configuração para seus ambientes de desenvolvimento, build e teste como um único pipeline, compartilhando os mesmos plugins e a mesma configuração.

uvu não oferece um modo de monitoramento inteligente para reexecutar apenas os testes modificados, enquanto Vitest proporciona uma DX (Developer Experience) excelente graças ao modo de monitoramento padrão usando o Hot Module Reload (HMR) instantâneo do Vite.

uvu é uma opção rápida para testes simples, mas Vitest pode ser mais rápido e confiável para testes e projetos mais complexos.