El Arte de las 'Vistas Humildes': Probando Aplicaciones React Native de Manera Inteligente

Rate this content
Bookmark

En esta charla, exploramos el mundo divisivo de las pruebas, donde los desarrolladores a menudo se encuentran divididos entre no escribir pruebas y esforzarse por una cobertura de pruebas del 100%. Aprenda a navegar estas posiciones polarizantes y adopte una estrategia más matizada que hace que las pruebas sean eficientes y efectivas. Profundizaremos en el concepto de 'Vistas Humildes', donde minimizamos los objetos no probables extrayendo la lógica de los elementos de la interfaz de usuario a partes amigables para pruebas del código base. Este enfoque simplifica las pruebas, centrándose en la lógica de negocio en lugar de las complejidades de la interfaz de usuario. Descubra cómo la arquitectura Modelo-Vista-Presentador (MVP) ayuda a lograr esto, con los presentadores sirviendo como una capa lógica para las pruebas y los hooks ayudando a separar la lógica de los componentes de la interfaz de usuario. A lo largo de la charla, discutiremos los compromisos de este enfoque, el papel de las pruebas de extremo a extremo (E2E), y cómo lograr el equilibrio perfecto entre demasiadas y pocas pruebas. ¡Únase a nosotros mientras nos adentramos en el arte de crear 'Vistas Humildes', asegurando que nuestras aplicaciones React Native sean escalables, mantenibles y efectivamente probadas!

Mo Khazali
Mo Khazali
32 min
07 Dec, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla discute los desafíos de las pruebas en las aplicaciones React y React Native, particularmente con respecto al escaneo de códigos de barras. Explora la violación de la separación de preocupaciones en React y propone el uso del modelo HumbleObject para simplificar las pruebas y mejorar la limpieza del código. También se introduce el modelo MVP como una forma de separar el estado de la interfaz de usuario y la lógica del componente. Se enfatiza la importancia de seguir patrones, la estandarización y los principios de enseñanza, junto con los beneficios de usar hooks personalizados para compartir la lógica de negocio. También se menciona el potencial de las herramientas de IA en la refactorización del código.

Available in English

1. Introducción a las Vistas Humildes y Pruebas

Short description:

Hola a todos. Muchas gracias, Nathaniel. Esa fue sinceramente una introducción muy amable. Hoy estoy emocionado de estar en Berlín hablando sobre las vistas humildes en las aplicaciones de React y React Native. Dirijo el equipo móvil en el Reino Unido para Theodo, una consultoría global con experiencia en React y React Native. Las pruebas son un tema polémico con diferentes puntos de vista, desde apuntar a un 100% de cobertura de pruebas hasta no hacer pruebas en absoluto.

♪♪♪ Hola a todos. Muchas gracias, Nathaniel. Esa fue sinceramente una introducción muy, muy amable. Me siento humilde. Vamos. Bueno, los chistes de papá no caen muy bien aquí. Bueno saberlo. Bien, de acuerdo. Así que hoy estoy muy emocionado de estar en Berlín con todos ustedes. Es mi primera vez en la ciudad, y es tan estéticamente agradable. Las vibraciones son sinceramente impecables, especialmente con la nieve. Estoy muy emocionado de hablar sobre este concepto de vistas humildes. Vamos a ver cómo puedes arquitecturar tus aplicaciones de React y React Native para, con suerte, facilitar un poco las pruebas y también hacer que tus aplicaciones sean más escalables.

Un poco sobre mí. Como mencionó Nathaniel, mi nombre es Mo. Dirijo el equipo móvil en el Reino Unido para Theodo. Así que Theodo es una consultoría global con más de 700 expertos digitales, 150 de los cuales hacen React Native y React. Así que hemos estado haciendo React y React Native desde los primeros días de su aparición. Y como resultado, hemos pasado por fases de evolución y hemos visto diferentes bases de código y hemos visto diferentes patrones e intentado encontrar los que duran mucho tiempo y son escalables y esperamos poder compartir algo de eso con ustedes hoy.

Así que las pruebas son un tema polémico. La gente suele caer en dos campos. Si sigues la ruta del artesano del software, te encuentras con gente como Bob Martin, que cree firmemente que debes apuntar a un 100% de cobertura de pruebas, que una alta cobertura de pruebas es la piedra angular de una buena base de código. Así que esta es la visión tradicional, y esta es la visión que te dirá el artesano del software. Más recientemente, por otro lado, tienes a los influencers de YouTube en el espacio de la codificación que te dirán, ¿sabes qué? No he estado probando durante años y he sido muy rápido, nunca podrás alcanzarme. Trabajé en Twitch, confía en mí, hermano. Y entonces obtienes estos diferentes puntos de vista y tienes gente que está vehementemente en contra de las pruebas y tienes gente que está muy, muy a favor de las pruebas. Y así, como con muchas cosas en la vida estos días, las cosas se polarizan al extremo. A la izquierda, tienes a la gente que dice, no pruebes. Y si pruebas, nunca más me hables. Y luego a la derecha, tienes gente que dice, tu código es malo, deberías estar probando cada parte de él.

2. Desafíos con las Pruebas del Escáner de Códigos de Barras

Short description:

Tienes esta tierra de nadie de pruebas en el medio donde se pierde toda la sutileza. Mi objetivo es molestar a ambas partes con una charla. Permíteme establecer el escenario: un proyecto de React Native en la industria de la moda. Un desarrollador quería probar el escáner de códigos de barras pero se encontró con desafíos en la configuración. Se requerían múltiples contextos y simulacros para las pruebas.

Y realmente, lo que sucede es que tienes esta tierra de nadie de testing en el medio donde se pierde toda la sutileza. Y a veces se lanzan tomates desde ambos lados. Pero realmente, no se tienen muchas conversaciones matizadas en torno a un enfoque pragmático de testing. Y me considero un poco centrista. No defiendo nada. Así que mi objetivo es molestar a ambas partes con una charla. Veremos cómo va esto.

Permíteme establecer un poco el escenario. Así que hace un par de años, estaba trabajando en un proyecto de React Native en la industria de la moda. La aplicación iba a ser utilizada en almacenes donde iban a escanear artículos de ropa con un escáner de códigos de barras dentro de la aplicación. Y almacenaría alguna información. Podrían introducir información sobre el artículo de ropa. Y estaba siendo utilizado por la oficina de atrás, efectivamente. Había una desarrolladora en mi equipo que estaba trabajando mucho en las cosas de front end. Y en un momento me dijo, estoy intentando escribir una prueba para el escáner de códigos de barras. Básicamente, lo que quiero probar es que cada código de barras tiene un checksum. Los últimos dígitos serán una suma de algunos de los valores en el medio en alguna fórmula matemática. Así que quiero probar eso. Pero el desafío que encontró fue que necesitaba hacer mucha configuración antes de que pudiera realmente probar eso al renderizar la pantalla. ¿Y a qué me refiero con eso? De hecho, extraje el código y verás lo horroroso que es en solo un segundo. Pero esta pantalla inicialmente tenía un montón de contextos diferentes. Y realmente no los necesitábamos para la pantalla en sí. Pero necesitaba ser simulado para que pudieran seguir adelante y probarlo. Genial. Así que eso es un montón de simulacros. Luego, algunos de los clientes necesitaban ser simulados para las solicitudes de fetch. El escáner de códigos de barras de Expo, que era una biblioteca externa que utiliza el dispositivo nativo, también necesitaba ser simulado porque no tienes acceso a eso en las pruebas unitarias. Tu marco de navegación en la capa nativa necesitaba ser simulado. Bien. Eso es más simulacros.

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

Test Effective Development
TestJS Summit 2021TestJS Summit 2021
31 min
Test Effective Development
Top Content
Developers want to sleep tight knowing they didn't break production. Companies want to be efficient in order to meet their customer needs faster and to gain competitive advantage sooner. We ALL want to be cost effective... or shall I say... TEST EFFECTIVE!But how do we do that?Are the "unit" and "integration" terminology serves us right?Or is it time for a change? When should we use either strategy to maximize our "test effectiveness"?In this talk I'll show you a brand new way to think about cost effective testing with new strategies and new testing terms!It’s time to go DEEPER!
We May Not Need Component Testing
Vue.js Live 2024Vue.js Live 2024
26 min
We May Not Need Component Testing
Testings are mandatory and unit tests are the foundation for building a good testing system for our project. But for front end projects which involve components, how many unit tests are considered efficient and not overkill? Should we use additional libraries like Testing Library or Vue Test Utils with Vitest to test a component, when we can perform the same with just Playwright? Whether a component test using an E2E framework like Playwright is really a kill for? Let's find out in my talk.
Component Testing With Vitest
TestJS Summit 2023TestJS Summit 2023
29 min
Component Testing With Vitest
Testing is important. Proper unit tests can eliminate the chance for bugs to appear. But which testing framework will be suitable? Let’s explore how we can develop a reliable and efficient strategy for component development and testing with Vitest
It's a (Testing) Trap! - Common Testing Pitfalls and How to Solve Them
TestJS Summit 2021TestJS Summit 2021
20 min
It's a (Testing) Trap! - Common Testing Pitfalls and How to Solve Them
It’s a trap” - a call or feeling we all might be familiar with, not only when it comes to Star Wars. It’s signalizing a sudden moment of noticing imminent danger. This situation is an excellent allegory for an unpleasant realization in testing. Imagine having the best intentions when it comes to testing but still ending up with tests failing to deliver you any value at all? Tests who are feeling like a pain to deal with?
When writing frontend tests, there are lots of pitfalls on the way. In sum, they can lead to lousy maintainability, slow execution time, and - in the worst-case - tests you cannot trust. But it doesn’t have to be that way. In this session, I will talk about developers’ common mistakes (including mine), at least from my experience. And, of course, on how to avoid them. Testing doesn’t need to be painful, after all.
How to Catch a11y Defects During Unit and E2E Testing
TestJS Summit 2021TestJS Summit 2021
7 min
How to Catch a11y Defects During Unit and E2E Testing
For developers, it is better to catch any a11y defects during unit and e2e testings. This talk is going to show how to automate a11y testing using jest and cypress.
Unit Testing Angular Applications
TestJS Summit 2022TestJS Summit 2022
24 min
Unit Testing Angular Applications
Angular offers many things out of the box, including various testing-related functionalities. This presentation will demonstrate how we can build on Angular's solid unit testing fundamentals and apply certain patterns that make testing easier. Topics covered include: test doubles, testing module pattern, harnesses, "recipes" on how to test some common cases, and more!

Workshops on related topic

Introduction to React Native Testing Library
React Advanced Conference 2022React Advanced Conference 2022
131 min
Introduction to React Native Testing Library
Workshop
Josh Justice
Josh Justice
Are you satisfied with your test suites? If you said no, you’re not alone—most developers aren’t. And testing in React Native is harder than on most platforms. How can you write JavaScript tests when the JS and native code are so intertwined? And what in the world are you supposed to do about that persistent act() warning? Faced with these challenges, some teams are never able to make any progress testing their React Native app, and others end up with tests that don’t seem to help and only take extra time to maintain.
But it doesn’t have to be this way. React Native Testing Library (RNTL) is a great library for component testing, and with the right mental model you can use it to implement tests that are low-cost and high-value. In this three-hour workshop you’ll learn the tools, techniques, and principles you need to implement tests that will help you ship your React Native app with confidence. You’ll walk away with a clear vision for the goal of your component tests and with techniques that will help you address any obstacle that gets in the way of that goal.you will know:- The different kinds React Native tests, and where component tests fit in- A mental model for thinking about the inputs and outputs of the components you test- Options for selecting text, image, and native code elements to verify and interact with them- The value of mocks and why they shouldn’t be avoided- The challenges with asynchrony in RNTL tests and how to handle them- Options for handling native functions and components in your JavaScript tests
Prerequisites:- Familiarity with building applications with React Native- Basic experience writing automated tests with Jest or another unit testing framework- You do not need any experience with React Native Testing Library- Machine setup: Node 16.x or 18.x, Yarn, be able to successfully create and run a new Expo app following the instructions on https://docs.expo.dev/get-started/create-a-new-app/