Comparaciones con otros ejecutores de pruebas

Jest

Jest dominó el ámbito de los frameworks de pruebas al ofrecer soporte inmediato para la mayoría de los proyectos de JavaScript, una API intuitiva (it y expect), y un conjunto completo de características de prueba que la mayoría de las configuraciones requerirían (snapshots, mocks, cobertura). Agradecemos al equipo y la comunidad de Jest por crear una API de pruebas agradable y por impulsar muchos de los patrones de prueba que ahora son un estándar en el ecosistema web.

Es posible usar Jest en configuraciones de Vite. @sodatea desarrolló vite-jest, que busca proporcionar una integración nativa de Vite para Jest. Los últimos desafíos en Jest se han resuelto, lo que la convierte en una opción válida para sus pruebas unitarias.

Sin embargo, en un entorno donde Vite ya proporciona soporte para las herramientas web más comunes (TypeScript, JSX, los frameworks de UI más populares), Jest introduce una duplicidad de complejidad. Si su aplicación se basa en Vite, tener dos pipelines diferentes para configurar y mantener no es justificable. Con Vitest, puede definir la configuración para sus entornos de desarrollo, construcción y prueba como un único pipeline, compartiendo los mismos plugins y el mismo vite.config.js.

Incluso si su biblioteca no utiliza Vite (por ejemplo, si está construida con esbuild o Rollup), Vitest es una opción interesante, ya que le proporciona una ejecución más rápida para sus pruebas unitarias y una mejora significativa en la experiencia de desarrollo (DX) gracias al modo de observación predeterminado que utiliza la recarga instantánea de módulos en caliente (HMR) de Vite. Vitest ofrece compatibilidad con la mayoría de las API de Jest y las bibliotecas del ecosistema, por lo que en la mayoría de los proyectos, debería ser un reemplazo directo de Jest.

Cypress

Cypress es un ejecutor de pruebas basado en navegador y una herramienta complementaria a Vitest. Si desea usar Cypress, sugerimos utilizar Vitest para toda la lógica headless en su aplicación y Cypress para toda la lógica basada en navegador.

Cypress es conocido como una herramienta de pruebas de extremo a extremo, pero su nuevo ejecutor de pruebas de componentes ofrece un excelente soporte para probar componentes de Vite y es una opción ideal para probar cualquier elemento que se renderice en un navegador.

Los ejecutores basados en navegador, como Cypress, WebdriverIO y Web Test Runner, detectarán problemas que Vitest no puede, ya que utilizan el navegador real y las API reales del navegador.

El controlador de pruebas de Cypress se enfoca en determinar si los elementos son visibles, accesibles e interactivos. Cypress está diseñado específicamente para el desarrollo y las pruebas de interfaces de usuario, y su DX se centra en el desarrollo basado en pruebas (TDD) de sus componentes visuales. Permite ver el componente renderizado junto con el informe de pruebas. Una vez que la prueba se completa, el componente permanece interactivo y se puede depurar cualquier falla utilizando las herramientas de desarrollo del navegador.

En contraste, Vitest se enfoca en ofrecer la mejor DX posible para pruebas headless extremadamente rápidas. Los ejecutores basados en Node, como Vitest, admiten varios entornos de navegador que están parcialmente implementados, como jsdom, que implementan lo necesario para que pueda probar rápidamente cualquier código que haga referencia a las API del navegador. La contrapartida es que estos entornos de navegador tienen limitaciones en lo que pueden implementar. Por ejemplo, a jsdom le faltan varias características como window.navigation o un motor de diseño (offsetTop, etc.).

Por último, a diferencia de Web Test Runner, el ejecutor de pruebas de Cypress se asemeja más a un IDE que a un ejecutor de pruebas, ya que también muestra el componente renderizado real en el navegador, junto con los resultados de las pruebas y los registros.

Cypress también ha estado integrando Vite en sus productos: reconstruyendo la UI de su aplicación usando Vitesse y utilizando Vite para el desarrollo de pruebas de su proyecto.

Creemos que Cypress no es una buena opción para pruebas unitarias de código headless, pero que usar Cypress (para E2E y pruebas de componentes) y Vitest (para pruebas unitarias) cubriría las necesidades de pruebas de su aplicación.

WebdriverIO

WebdriverIO es, similar a Cypress, un ejecutor de pruebas alternativo basado en navegador y una herramienta complementaria a Vitest. Se puede usar como una herramienta de pruebas de extremo a extremo, así como para probar componentes web. Incluso utiliza componentes de Vitest internamente, por ejemplo, para mocking y stubbing dentro de las pruebas de componentes.

WebdriverIO ofrece las mismas ventajas que Cypress, permitiéndole probar su lógica en un navegador real. Sin embargo, utiliza estándares web reales para la automatización, lo que supera algunas de las contrapartidas y limitaciones al ejecutar pruebas en Cypress. Además, le permite ejecutar pruebas también en dispositivos móviles, lo que le brinda la posibilidad de probar su aplicación en aún más entornos.

Web Test Runner

@web/test-runner ejecuta pruebas dentro de un navegador en modo headless, proporcionando el mismo entorno de ejecución que su aplicación web sin necesidad de mockear las API del navegador o el DOM. Esto también hace posible depurar dentro de un navegador real usando las herramientas de desarrollo, aunque no se muestra ninguna UI para depurar paso a paso la prueba, como ocurre en las pruebas de Cypress.

Para usar @web/test-runner con un proyecto Vite, utilice @remcovaes/web-test-runner-vite-plugin. @web/test-runner no incluye bibliotecas de aserción o mocking, por lo que depende de usted agregarlas.

uvu

uvu es un ejecutor de pruebas para Node.js y el navegador. Ejecuta pruebas en un solo hilo, por lo que las pruebas no están aisladas y pueden afectar a otros archivos. Vitest, sin embargo, utiliza worker threads para aislar las pruebas y ejecutarlas en paralelo.

Para transformar su código, uvu se basa en los hooks de require y loader. Vitest utiliza Vite, por lo que los archivos se transforman aprovechando todo el potencial del sistema de plugins de Vite. En un entorno donde Vite ya proporciona soporte para las herramientas web más comunes (TypeScript, JSX, los frameworks de UI más populares), uvu duplica la complejidad. Si su aplicación se basa en Vite, tener dos pipelines diferentes para configurar y mantener no es justificable. Con Vitest, puede definir la configuración para sus entornos de desarrollo, construcción y prueba como un único pipeline, compartiendo los mismos plugins y la misma configuración.

uvu no proporciona un modo watch inteligente para volver a ejecutar las pruebas modificadas, mientras que Vitest le brinda una DX increíble gracias al modo de observación predeterminado que utiliza la recarga instantánea de módulos en caliente (HMR) de Vite.

uvu es una opción rápida para ejecutar pruebas simples, pero Vitest puede ser más rápido y más confiable para pruebas y proyectos más complejos.