Comparações com Outros Executores de Teste

Jest

O Jest se destacou no cenário de frameworks de teste ao fornecer suporte imediato para a maioria dos projetos JavaScript, uma API confortável (it e expect) e o pacote completo de recursos de teste que a maioria das configurações exigiria (snapshots, mocks, coverage). Agradecemos à equipe e à comunidade do Jest por criar uma API de teste agradável e por impulsionar muitos dos padrões de teste que agora são comuns no ecossistema web.

É possível usar o Jest em projetos Vite. @sodatea desenvolveu o vite-jest, que visa fornecer integração Vite de primeira classe para o Jest. Os últimos impedimentos no Jest foram resolvidos, portanto, é uma opção válida para seus testes unitários.

No entanto, em um cenário onde o Vite oferece suporte para as ferramentas web mais comuns (TypeScript, JSX, Frameworks de Interface mais populares), o Jest representa uma duplicação de complexidade. Se seu aplicativo é alimentado pelo Vite, ter dois pipelines diferentes para configurar e manter não é justificável. Com o 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 arquivo vite.config.js.

Mesmo que sua biblioteca não esteja usando o Vite (por exemplo, se for construída com esbuild ou rollup), o Vitest é uma opção interessante, pois oferece uma execução mais rápida para seus testes unitários e uma Experiência do Desenvolvedor (DX) aprimorada, graças ao modo de observação padrão com o Hot Module Reload (HMR) instantâneo do Vite. O Vitest oferece compatibilidade com a maioria da API do Jest e bibliotecas do ecossistema, portanto, na maioria dos projetos, deve ser um substituto direto para o Jest.

Cypress

Cypress é um executor de teste baseado em navegador e uma ferramenta complementar ao Vitest. Se você deseja usar o Cypress, sugerimos usar o Vitest para toda a lógica headless em seu aplicativo e o Cypress para toda a lógica baseada em navegador.

O Cypress é conhecido como uma ferramenta de teste end-to-end, mas seu novo executor de teste de componente oferece excelente suporte para testar componentes Vite e é uma escolha ideal para testar qualquer coisa que seja renderizada em um navegador.

Executores baseados em navegador, como Cypress, WebdriverIO e Web Test Runner, detectarão problemas que o Vitest não consegue detectar, porque usam o navegador real e as APIs reais do navegador.

O driver de teste do Cypress está focado em determinar se os elementos estão visíveis, acessíveis e interativos. O Cypress foi construído especificamente para o desenvolvimento e teste de UI e seu DX é centrado em testar seus componentes visuais. Você vê seu componente renderizado junto com o relatório de teste. Uma vez que o teste é concluído, o componente permanece interativo e você pode depurar quaisquer falhas que ocorram usando as devtools do seu navegador.

Em contraste, o Vitest está focado em fornecer a melhor Experiência do Desenvolvedor (DX) possível para testes headless extremamente rápidos. Executores baseados em Node como o Vitest suportam vários ambientes de navegador parcialmente implementados, como jsdom, que implementam o suficiente para você testar rapidamente qualquer código que faça referência às APIs do navegador. A desvantagem é que esses ambientes de navegador têm limitações no que podem implementar. Por exemplo, jsdom está faltando uma série de recursos como window.navigation ou um motor de layout (offsetTop, etc).

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

O Cypress também integrou o Vite em seus produtos: reconstruindo a UI de seu aplicativo usando Vitesse e usando o Vite para o desenvolvimento de testes do seu projeto.

Acreditamos que o Cypress não é uma boa opção para testes unitários de código headless, mas que usar o Cypress (para E2E e Teste de Componente) e o Vitest (para testes unitários) cobriria as necessidades de teste do seu aplicativo.

WebdriverIO

WebdriverIO é, assim como o Cypress, um executor de teste 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 web components. Ele até usa componentes do Vitest internamente, por exemplo, para mocking e stubbing dentro de testes de componente.

O WebdriverIO oferece as mesmas vantagens que o Cypress, permitindo que você teste sua lógica em um navegador real. No entanto, ele usa padrões web reais para automação, superando algumas das desvantagens e limitações encontradas ao executar testes no Cypress. Além disso, ele permite que você execute testes em dispositivos móveis também, dando-lhe acesso para testar seu aplicativo em ainda mais ambientes.

Web Test Runner

@web/test-runner executa testes dentro de um navegador headless, fornecendo o mesmo ambiente de execução que seu aplicativo 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 devtools, embora não haja nenhuma UI mostrada para percorrer o teste, como há nos testes do Cypress. Há um modo de observação, mas não é tão inteligente quanto o do Vitest, e pode nem sempre executar novamente os testes desejados. 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 cabe a você adicioná-las.

uvu

uvu é um executor de teste para Node.js e o navegador. Ele executa testes em uma única thread, então os testes não são isolados e podem vazar entre os arquivos. O Vitest, no entanto, usa worker threads para isolar os testes e executá-los em paralelo. Para transformar seu código, o uvu depende de require e loader hooks. O Vitest usa Vite, portanto, os arquivos são transformados com todo o poder do sistema de plugins do Vite. Em um cenário onde o Vite oferece suporte para as ferramentas web mais comuns (TypeScript, JSX, Frameworks de Interface mais populares), o uvu representa uma duplicação de complexidade. Se seu aplicativo é alimentado pelo Vite, ter dois pipelines diferentes para configurar e manter não é justificável. Com o 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 arquivo vite.config.js. O uvu não oferece um modo de observação inteligente para reexecutar os testes alterados, enquanto o Vitest oferece um DX incrível graças ao modo de observação padrão usando o Hot Module Reload (HMR) instantâneo do Vite. O uvu é uma opção rápida para executar testes simples, mas o Vitest pode ser mais rápido e mais confiável para testes e projetos mais complexos.