Pruebas de Componentes con Vitest

Rate this content
Bookmark
Esta charla explora los desafíos de elegir y aprender marcos de pruebas, enfatizando la importancia de la planificación, la automatización y la priorización de las pruebas unitarias. El marco VTEST se presenta como una opción rápida y estable para las pruebas unitarias de código JavaScript y TypeScript, con un enfoque en la lógica y la simulación de dependencias externas. La charla también cubre las pruebas de los hooks de React, las pruebas de integración con TestingLibraryReact, las pruebas de componentes y la consecución de la cobertura de código. Las mejores prácticas incluyen la realización de pruebas de accesibilidad, la planificación de pruebas antes de la codificación y el uso de IDs de prueba de datos para la estabilidad.

From Author:

Las pruebas son importantes. Las pruebas unitarias adecuadas pueden eliminar la posibilidad de que aparezcan errores. Pero, ¿qué marco de pruebas será adecuado? Exploremos cómo podemos desarrollar una estrategia confiable y eficiente para el desarrollo y prueba de componentes con Vitest

This talk has been presented at TestJS Summit 2023, check out the latest edition of this JavaScript Conference.

FAQ

Maya Chavin menciona que aunque reconoce la necesidad de realizar pruebas, personalmente no disfruta el proceso de hacerlas.

Maya Chavin aconseja planificar antes de elegir un marco de pruebas, considerando primero las necesidades del proyecto y luego seleccionando una herramienta que se adapte a estas.

Maya Chavin enfatiza la importancia de la automatización en las pruebas, señalando que ayuda a asegurar la cobertura de código y optimiza el proceso de testing.

Maya Chavin es una Ingeniera de Software Senior en Microsoft, trabajando para el grupo Microsoft Industry AI.

Maya Chavin publicó un libro relacionado con el aprendizaje de Vue hace solo dos días.

Las pruebas unitarias evalúan componentes individuales, las pruebas de integración verifican la interacción entre componentes, y las pruebas de extremo a extremo se enfocan en la experiencia completa del usuario.

VTest es un marco de pruebas de JavaScript y TypeScript, desarrollado inicialmente para proyectos impulsados por VIT pero ahora aplicable a otros contextos. Se utiliza para realizar pruebas unitarias de forma rápida y eficiente.

Maya Shavin
Maya Shavin
29 min
07 Dec, 2023

Comments

Sign in or register to post your comment.

Video Transcription

Available in English: Component Testing With Vitest

1. Introducción a los Marcos de Prueba

Short description:

¡Gracias! Soy Maya Chavin, una Ingeniera de Software Senior en Microsoft trabajando con Microsoft Industry AI. Odio las pruebas, pero sabemos que las necesitamos. La complejidad del código y la elección de un marco de pruebas son desafíos. Esta charla es sobre otro marco y su curva de aprendizaje.

¡Gracias! Bueno, es bastante temprano en la mañana y un minuto, sí, está cargando. ¿Cómo te sientes hoy? ¿Todo bien? ¿Tienes café? De hecho, tomé un sorbo de café y todavía estoy muy tranquila. El clima me parece una locura.

De todos modos, antes de que deep dive en nuestra charla, solo quiero repetir lo que estaba hablando sobre mí misma. Así que soy Maya Chavin, soy una Ingeniera de Software Senior en Microsoft. Trabajo para un grupo llamado Microsoft Industry AI. Así que hacemos algo así como aprovechar diferentes tecnologías de IA para construir soluciones específicas de la industria con JetGPT, GPT, y todo este módulo. Publiqué mi libro hace solo dos días, sí. Así que si eres y no has conocido Vue antes, quieres aprender Vue, sí, échale un vistazo. Y era un mantenedor de código abierto. Puedes seguirme en Maya Chavin o seguir mi blog. Publico un artículo una vez cada luna azul, con suerte.

De todos modos, testing. Así que sí, tenemos que probar, todos lo saben, ¿verdad? Tengo una advertencia antes de continuar. Odio las pruebas. Sí. Realmente odio las pruebas. Cada vez que llego a las pruebas, odio las pruebas. Antes de llegar a la prueba, digo, sí, todos tienen que escribir pruebas, todos, literalmente incluyéndome a mí. Y siempre le digo a todos en mi equipo, tienes que escribir pruebas. Pero cuando voy a escribir la prueba yo misma, digo, vamos, ¿por qué alguien querría una prueba? Bueno, sabemos que necesitamos pruebas, pero siempre enfrentamos el dilema, y eso es por qué odiamos las pruebas, más o menos. Complejidad del código. Cualquiera que trabaje con una página de código muy grande conocerá el dolor cuando necesite escribir pruebas. Y necesitas escribir pruebas para asegurarte de que tu prueba solo verificará lo que sucedió en tu código y no porque alguien más haga algo y luego afecte tus calidades de tu código. Marco de testing. No vas a elegir un marco. ¿Qué marco vas a elegir? Y sí, esta charla es sobre otro marco. Sí. Lo sé. Y la curva de aprendizaje.

2. Desafíos de los Marcos de Pruebas

Short description:

Cada vez que hablamos de un nuevo marco de pruebas, cambiamos de uno a otro porque es más genial y rápido. Pero siempre hay una curva de aprendizaje. No todos están de acuerdo, y las APIs difieren. El dilema es asegurar una cobertura de código del 90%. Si no, los PR no se fusionarán. Todo se reduce al tiempo. ¿Cómo asignamos tiempo y esfuerzo a las pruebas?

Cada vez que hablamos de un nuevo testing marco, cambiamos de un testing marco a otro simplemente porque el otro es mucho más genial y rápido, siempre tenemos una curva de aprendizaje. Porque no a todos les gusta estar de acuerdo, no todas las API se ven igual, se sienten igual, hacen lo mismo. Y llegamos a un punto muy específico de dilema aquí. Pasas todo esto, todavía necesitas asegurarte de que tu prueba pase la cobertura mínima de tu base de código. ¿Y qué pasa si alguien decide que el 90% de tu base de código necesita ser cubierta por la prueba? Entonces lo haces. 89 o 99 no es 90. Y eso impide que tu PR se fusione y probablemente quieras levantarte de la mesa y gritarle a alguien por eso. Y todo se reduce a una sola cosa. Solo este dilema se reduce a una sola cosa, el tiempo.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Desarrollo Efectivo de Pruebas
TestJS Summit 2021TestJS Summit 2021
31 min
Desarrollo Efectivo de Pruebas
Top Content
This Talk introduces Test Effective Development, a new approach to testing that aims to make companies more cost-effective. The speaker shares their personal journey of improving code quality and reducing bugs through smarter testing strategies. They discuss the importance of finding a balance between testing confidence and efficiency and introduce the concepts of isolated and integrated testing. The speaker also suggests different testing strategies based on the size of the application and emphasizes the need to choose cost-effective testing approaches based on the specific project requirements.
El Arte de las 'Vistas Humildes': Probando Aplicaciones React Native de Manera Inteligente
TestJS Summit 2023TestJS Summit 2023
32 min
El Arte de las 'Vistas Humildes': Probando Aplicaciones React Native de Manera Inteligente
This Talk discusses the challenges of testing in React and React Native applications, particularly with regards to barcode scanning. It explores the violation of separation of concerns in React and proposes the use of the HumbleObject model to simplify testing and improve code cleanliness. The MVP model is also introduced as a way to separate UI state and logic from the component. The importance of following patterns, standardization, and teaching principles is emphasized, along with the benefits of using custom hooks to share business logic. The potential of AI tools in code refactoring is mentioned as well.
Quizá No Necesitemos Pruebas de Componentes
Vue.js Live 2024Vue.js Live 2024
26 min
Quizá No Necesitemos Pruebas de Componentes
Component testing is a gray area between integration and unit testing. The demo app focuses on the cart component and writing test cases for Playwright component test and VTest. The first cart test encounters a bug with the invisible method in View Test.
¡Es una trampa! - Trampas comunes en las pruebas y cómo solucionarlas
TestJS Summit 2021TestJS Summit 2021
20 min
¡Es una trampa! - Trampas comunes en las pruebas y cómo solucionarlas
This Talk explores the pain points and best practices in software testing, emphasizing the importance of simplicity and comprehensibility in test design. It discusses techniques such as the three-part rule for test titles, the triple-A pattern for test structure, and the use of clear and descriptive names in tests. The Talk also highlights the traps of testing implementation details and using fixed waiting times. The speaker encourages teamwork and learning from experience to improve testing practices.
Cómo detectar defectos de accesibilidad durante las pruebas unitarias y E2E
TestJS Summit 2021TestJS Summit 2021
7 min
Cómo detectar defectos de accesibilidad durante las pruebas unitarias y E2E
This Talk provides ways to catch accessibility defects during testing, including adding accessibility testing to a website for Studio Ghibli using React, NX, Jazz, JazzX, Cypress, and CypressX. The importance of unitizing components and conducting end-to-end testing with Cypress and CypressX is emphasized to ensure accessibility. The process of setting up CypressX testing is explained, highlighting the use of typings and the CypressX support file. These tools make it easier for developers to avoid accessibility bugs during development.
Pruebas unitarias en aplicaciones Angular
TestJS Summit 2022TestJS Summit 2022
24 min
Pruebas unitarias en aplicaciones Angular
This talk explores unit testing in Angular applications, covering topics such as testing front-end applications, specifics of testing Angular, best practices, and educational resources. It discusses the anatomy of a unit test in both Jasmine and Jest, the setup and initial tests in Angular, testing user interaction and event handlers, testing rendered output and change detection, and unit testing parent components with child components. It also highlights best practices like using test doubles, testing components with dependency injection, and considerations for unit testing. Code coverage is emphasized as a metric that doesn't guarantee bug-free code.

Workshops on related topic

Aprende a utilizar Composables: La navaja suiza de los desarrolladores de Vue
Vue.js Live 2024Vue.js Live 2024
163 min
Aprende a utilizar Composables: La navaja suiza de los desarrolladores de Vue
Workshop
Juan Andrés Núñez Charro
Juan Andrés Núñez Charro
Los Composables (funciones de composición) son funciones con estado/sin estado que pueden aprovechar la API de reactividad de Vue, desacoplándola de los componentes.Este cambio de perspectiva abre la posibilidad de abordar escenarios comunes de una manera nueva y creativa. En este masterclass, aprenderás cómo resolver problemas típicos que enfrenta cada desarrollador de Vue, utilizando composables:
- Almacenamiento de datos;- Comunicación entre componentes;- Funciones de utilidad (DOM, API, etc);Y más.
Introducción a React Native Testing Library
React Advanced Conference 2022React Advanced Conference 2022
131 min
Introducción a React Native Testing Library
Workshop
Josh Justice
Josh Justice
¿Estás satisfecho con tus suites de pruebas? Si dijiste que no, no estás solo, la mayoría de los desarrolladores no lo están. Y hacer pruebas en React Native es más difícil que en la mayoría de las plataformas. ¿Cómo puedes escribir pruebas en JavaScript cuando el código JS y nativo están tan entrelazados? ¿Y qué diablos se supone que debes hacer con esa persistente advertencia de act()? Ante estos desafíos, algunos equipos nunca logran avanzar en las pruebas de su aplicación de React Native, y otros terminan con pruebas que no parecen ayudar y solo requieren tiempo adicional para mantener.
Pero no tiene que ser así. React Native Testing Library (RNTL) es una excelente biblioteca para pruebas de componentes, y con el modelo mental adecuado puedes usarla para implementar pruebas de bajo costo y alto valor. En este taller de tres horas aprenderás las herramientas, técnicas y principios que necesitas para implementar pruebas que te ayudarán a lanzar tu aplicación de React Native con confianza. Saldrás con una visión clara del objetivo de tus pruebas de componentes y con técnicas que te ayudarán a superar cualquier obstáculo que se interponga en ese objetivo.aprenderás:- Los diferentes tipos de pruebas en React Native, y dónde encajan las pruebas de componentes- Un modelo mental para pensar en las entradas y salidas de los componentes que pruebas- Opciones para seleccionar elementos de texto, imagen y código nativo para verificar e interactuar con ellos- El valor de las simulaciones y por qué no se deben evitar- Los desafíos con la asincronía en las pruebas de RNTL y cómo manejarlos- Opciones para manejar funciones y componentes nativos en tus pruebas de JavaScript
Requisitos previos:- Familiaridad con la construcción de aplicaciones con React Native- Experiencia básica en la escritura de pruebas automatizadas con Jest u otro framework de pruebas unitarias- No necesitas experiencia previa con React Native Testing Library- Configuración de la máquina: Node 16.x o 18.x, Yarn, ser capaz de crear y ejecutar con éxito una nueva aplicación Expo siguiendo las instrucciones en https://docs.expo.dev/get-started/create-a-new-app/