Versión en EspañolES

Testing React Applications Like an Engineer

A medida que nuestras aplicaciones de React crecen, también lo hacen los desafíos de mantener un código libre de errores. Crear un conjunto de pruebas confiable puede ser una tarea desalentadora, a menudo plagada de inestabilidad y complejidad. En esta charla, desglosaré un enfoque práctico y orientado a la ingeniería para escribir pruebas que realmente hagan que el desarrollo sea más fluido. Nos sumergiremos en las mejores formas de integrar Playwright con React, abandonar mentalidades de prueba obsoletas y adoptar estrategias que aseguren que tu aplicación funcione como se espera, sin dolores de cabeza. Espera ejemplos del mundo real, conclusiones prácticas y una nueva perspectiva sobre las pruebas que podría hacer que las disfrutes.

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

e2e testing

Austin Shelby

19 min

17 Jun, 2025

Comments

Video Summary and Transcription

Imagina el escenario de trabajar en el rover de Marte, enfatizando la importancia de las pruebas exhaustivas. Aprende a probar aplicaciones de React de manera efectiva como un ingeniero. Enfócate en pruebas centradas en el usuario sobre paradigmas tradicionales. Escribe casos de prueba precisos como historias de usuario usando BDD para una comunicación clara. Utiliza un enfoque estructurado con pasos de organizar, actuar, afirmar para pruebas claras. TDD es valioso para el diagnóstico y soluciones de errores, enfatizando la reproducción y resolución eficiente de errores. Anota pruebas para reproducir y corregir errores, enfocándote en los flujos de usuario y la corrección efectiva de errores.

Available in English: Testing React Applications Like an Engineer

Video transcription and chapters available for users with access.

Available in other languages:

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

Pruebas de Aplicaciones Web con Playwright

TestJS Summit 2022

20 min

Pruebas de Aplicaciones Web con Playwright

Top Content

Debbie O'Brien

Senior Program Manager @ Microsoft, working with Playwright.

Testing web applications with Playwright, a reliable end-to-end testing tool. Playwright offers fast execution, powerful tooling, and support for multiple languages. It provides precise selectors, web-first assertions, and code generation for easy testing. Playwright also offers features like live debugging, tracing, and running tests on CI. The future of Playwright aims to make testing easy and fun, with a focus on creating frustration-free web experiences.

e2e testing playwright react playwright react native

Pruebas de ciclo completo con Cypress

TestJS Summit 2022

27 min

Pruebas de ciclo completo con Cypress

Top Content

Filip Hric

Replay.io

Cypress is a powerful tool for end-to-end testing and API testing. It provides instant feedback on test errors and allows tests to be run inside the browser. Cypress enables testing at both the application and network layers, making it easier to reach different edge cases. With features like AppActions and component testing, Cypress allows for comprehensive testing of individual components and the entire application. Join the workshops to learn more about full circle testing with Cypress.

testing cypress e2e testing

Todos pueden escribir pruebas fácilmente

TestJS Summit 2023

21 min

Todos pueden escribir pruebas fácilmente

Debbie O'Brien

Senior Program Manager @ Microsoft, working with Playwright.

Playwright is a reliable end-to-end testing tool for modern web apps that provides one API, full isolation, fast execution, and supports multiple languages. It offers features like auto-weighting, retrying assertions, seamless testing of iframes and shadow DOM, test isolation, parallelism, and scalability. Playwright provides tools like VS Code extension, UiMode, and Trace Viewer for writing, debugging, and running tests. Effective tests prioritize user-facing attributes, use playwright locators and assertions, and avoid testing third-party dependencies. Playwright simplifies testing by generating tests, providing code generation and UI mode, and allows for easy running and debugging of tests. It helps in fixing failed tests and analyzing DOM changes, fixing locator mismatches, and scaling tests. Playwright is open source, free, and continuously growing.

testing e2e testing

Pruebas pequeñas, grandes resultados

TestJS Summit 2022

21 min

Pruebas pequeñas, grandes resultados

Nikolay Advolodkin

CEO and Chief Engineer at UltimateQA

Automated atomic tests are a great way to improve UI tests by making them less brittle and faster. The tests focus on testing a single feature or component and have minimal UI interactions. The Talk explores examples of automated atomic tests and their implementation on web applications. It also discusses the analysis of atomic tests, login tests, and working with JSON Web Tokens for authentication and authorization. The Talk concludes by highlighting the use of UI and web requests in automated atomic testing.

cypress e2e testing

Quizá No Necesitemos Pruebas de Componentes

Vue.js Live 2024

26 min

Quizá No Necesitemos Pruebas de Componentes

Maya Shavin

Published author, international speaker and an open-source library maintainer of frontend and web projects

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.

testing e2e testing unit testing

Prueba del Servicio de Correo con Playwright

TestJS Summit 2022

17 min

Prueba del Servicio de Correo con Playwright

Top Content

Kat Kmiotek

Zoopla

This Talk discusses how to test mail service with Playwright, covering e-mail verification, reset password user journey, and more. It explores the use of third-party providers for reliable e-mail delivery and demonstrates how Playwright can help perform checks on e-mail content. The Talk also introduces the concept of a fake SMTP server and showcases how fixtures can be used to access the SMTP server and perform assertions on the HTML body of emails. Playwright's HTML rendering feature allows for interaction with email content as if it were a regular web page. It highlights the ability to render HTML from API calls, perform assertions on the rendered page, and exclude dynamically generated data from visual regression tests.

javascript e2e testing playwright react playwright react native

Workshops on related topic

Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native

React Summit 2022

117 min

Detox 101: Cómo escribir pruebas de extremo a extremo estables para su aplicación React Native

Top Content

Workshop

Yevheniia Hlovatska

A diferencia de las pruebas unitarias, las pruebas de extremo a extremo buscan interactuar con su aplicación tal como lo haría un usuario real. Y como todos sabemos, puede ser bastante desafiante. Especialmente cuando hablamos de aplicaciones móviles.
Las pruebas dependen de muchas condiciones y se consideran lentas e inestables. Por otro lado, las pruebas de extremo a extremo pueden dar la mayor confianza de que su aplicación está funcionando. Y si se hace correctamente, puede convertirse en una herramienta increíble para aumentar la velocidad del desarrollador.
Detox es un marco de pruebas de extremo a extremo en caja gris para aplicaciones móviles. Desarrollado por Wix para resolver el problema de la lentitud e inestabilidad y utilizado por React Native en sí como su herramienta de pruebas E2E.
Únete a mí en esta masterclass para aprender cómo hacer que tus pruebas de extremo a extremo móviles con Detox sean excelentes.
Prerrequisitos- iOS/Android: MacOS Catalina o más reciente- Solo Android: Linux- Instalar antes de la masterclass

testing react native e2e testing beginner friendly react native accessibility react native detox react native test automation react native testing

Testing Web Applications Using Cypress

TestJS Summit - January, 2021

173 min

Testing Web Applications Using Cypress

Top Content

Workshop

Gleb Bahmutov

Esta masterclass te enseñará los conceptos básicos para escribir pruebas end-to-end útiles utilizando Cypress Test Runner.
Cubriremos la escritura de pruebas, cubriendo cada característica de la aplicación, estructurando pruebas, interceptando solicitudes de red y configurando los datos del backend.
Cualquiera que conozca el lenguaje de programación JavaScript y tenga NPM instalado podrá seguir adelante.

testing javascript cypress e2e testing

Construyendo una suite de pruebas significativa que no sea todo E2E

TestJS Summit 2023

89 min

Construyendo una suite de pruebas significativa que no sea todo E2E

Workshop

David Burns

Todos somos enseñados a seguir la Pirámide de Pruebas pero la realidad es que construimos el Árbol de Pruebas de Navidad. En esta masterclass, David te explicará cómo desglosar proyectos y poner las pruebas donde necesitan estar. Al final de la masterclass, podrás actualizar tus proyectos para que cualquiera y todos puedan empezar a contribuir y realmente vivir según "La calidad es el trabajo de todos".
Te guiará a través de:- Pruebas de Componentes- Pruebas de API- Pruebas de Regresión Visual- Pruebas A11Y
También te explicará cómo configurar todo esto en tu pipeline de CI/CD para que puedas obtener ciclos de feedback más cortos y rápidos.

testing security testing e2e testing

Depuración en vivo de pruebas de extremo a extremo para una aplicación serverless distribuida

TestJS Summit 2021

146 min

Depuración en vivo de pruebas de extremo a extremo para una aplicación serverless distribuida

Workshop

2 authors

En este masterclass, construiremos un entorno de pruebas para una aplicación preconstruida, luego escribiremos y automatizaremos pruebas de extremo a extremo para nuestra aplicación serverless. Y en el último paso, demostraremos lo fácil que es entender la causa raíz de una prueba errónea utilizando pruebas distribuidas y cómo depurarla en nuestro pipeline de CI/CD con Thundra Foresight.

Tabla de contenidos:
- Cómo configurar y probar tu infraestructura en la nube
- Cómo escribir y automatizar pruebas de extremo a extremo para tus cargas de trabajo serverless
- Cómo depurar, rastrear y solucionar problemas de fallas en las pruebas con Thundra Foresight en tus pipelines de CI/CD

testing e2e testing serverless debug

Infraestructura Uniforme de Automatización de Navegadores

TestJS Summit - January, 2021

127 min

Infraestructura Uniforme de Automatización de Navegadores

Workshop

Ivan Krutov

En este masterclass, te mostraré cómo implementar y utilizar rápidamente una infraestructura de automatización de navegadores con la solución Moon. Comenzaremos implementando todo en tu estación de trabajo y pronto podrás ejecutar pruebas de Selenium, Playwright y Puppeteer en paralelo en el mismo clúster. Luego, te demostraré cómo ofrecer la misma experiencia de manera sencilla para tu equipo utilizando un clúster remoto en la plataforma de la nube.

testing e2e testing