Probando React Hooks con Confianza

Hola a todos. Mi nombre es Radoslav Stankov. Pueden encontrarme en línea aquí. Soy el jefe de ingeniería en Product Hunt y actualmente me encuentro en Bulgaria. Si quieren ver mis presentaciones, están aquí. Todas las diapositivas y el código están vinculados a esta página para que puedan revisarlos más tarde.

Hoy vamos a hablar sobre la prueba de hooks con confianza. Existe una gran división entre el desarrollo impulsado por pruebas y la prueba automatizada, como podrán ver durante esta presentación. En mi charla, solo mencionaré cómo automatizar la prueba. No me adentraré en el desarrollo impulsado por pruebas y cosas relacionadas. Nuevamente, las palabras son baratas y no tengo muchas, así que les mostraré algo de código.

Les voy a mostrar esta aplicación de React sin probar. Es solo una pequeña aplicación de calculadora. Este es el código de la aplicación. Si se fijan, hay mucho código. Es una aplicación bastante simple, pero hay mucho código. ¿Cómo lo probamos? ¿Cómo sabemos que funciona? Podemos comenzar con una prueba simple y pequeña. Para la prueba pequeña, podemos agregar esos atributos de datos de prueba, para que podamos seleccionar los elementos, podemos usar la biblioteca de pruebas de React y podemos crear esta prueba simple y pequeña donde obtenemos la biblioteca de pruebas de React. Por lo general, cuando hago pruebas, me gusta tener esos ayudantes porque en general odio escribir cinco funciones una tras otra. Así que simplemente digo, ok, haz clic en este ID de datos. Y para mi prueba, este es otro pequeño truco que hago si necesito cambiar el nombre del componente y quiero volver y cambiar el nombre de la prueba. Así que aquí acabo de crear una prueba simple y pequeña. Simplemente funciona. Así que solo estoy probando, ceros vacíos, haciendo clic en más uno, uno, más dos, eliminar dos, evaluar y reiniciar. Básicamente, asegurándome de que este componente funcione. Esto es algo que haría normalmente para probar si las cosas funcionan manualmente. Esta es solo una prueba de marcador de posición. No es una prueba realmente buena. Como, la voy a eliminar al final, pero esto me asegura de que cuando refactorizo, no rompo algo. No es una prueba muy buena porque no sigue las cuatro fases de una buena prueba.

Entonces, ¿por dónde deberíamos empezar ahora? Lo primero que podemos hacer es limpiar el código. Lo que podemos hacer es una refactorización. Me gusta llamarlo extracción de hooks personalizados. Esta es una de mis características favoritas de los hooks, que es que puedes realmente arrancar hooks desde otros hooks y crear estas interfaces muy agradables.

Así que aquí toda esta lógica grande y pesada puede ser extraída en un simple hook, y este hook puede darte, ok, esto es lo que se guarda en la memoria de la calculadora y cuáles son las acciones. Y nuevamente, el código del hook es simplemente copiar y pegar, funciona. Entonces, ¿cómo vamos a probar este hook personalizado? Este es el siguiente paso que debemos hacer.

Para testing este hook personalizado, existe esta buena biblioteca llamada biblioteca de pruebas de React hooks, que te permite probar fácilmente el hook y lo que me gusta hacer es tener una función llamada emit hook, que básicamente oculta la configuración de boilerplate del hook. Y por ejemplo, quiero probar la acción de agregar. Entonces, para la acción de agregar, simplemente configuramos el hook, agregamos un valor y verificamos que después de que se recargue el hook, hemos actualizado nuestro valor y podemos básicamente probar, ok, si tengo dos dígitos, se suman, y puedes hacer todas las pruebas para eso, para eliminar es muy similar. Configuras el hook, simplemente lo llamas, tienes esta bonita función de llamada donde encapsulas esto y tienes todo esto. Y nuevamente, es un poco largo y te proporcionaré el enlace a las diapositivas al final para que puedas profundizar más.

Y ahora que tenemos esta prueba, que prueba muy a fondo nuestro hook con todos sus casos límite, con todas sus soluciones, podemos comenzar a refactorizar este hook. Lo que vamos a terminar al final de este gran montón de código es básicamente refactorizar este hook para usar solo un simple useReducer donde decimos, ok, tenemos una función reductora y al final tenemos las mismas acciones: agregar, eliminar, reiniciar, evaluar. Y esto es nuevamente el alcance del reductor. Es un poco más complejo. Es un poco más dividido, pero esto realmente prueba nuestra calculadora y realmente tenemos una cobertura de prueba completa. Y nuevamente, el código de esta presentación está en esta dirección para que puedas hacer clic y ver los detalles. Lo he dividido en pasos para que puedas ver todos los pasos de refactorización. Y un par de notas finales que quiero mencionar aquí es que al final, en realidad elimino todo ese código de la prueba de humo. No lo necesito. Lo que he encontrado en la práctica es que generalmente, cuando escribo componentes de React, son o muy simples, como obtienen algunos data y renderizan cosas, por lo que no hay mucho valor agregado en probarlos como una prueba unitaria. O la mayor lógica y la mayor parte de mis pruebas está en el código del hook. Por lo general, ese es el lugar donde se encuentra gran parte de la complejidad de mi sistema. Así que generalmente dejé de hacer pruebas unitarias de React. Y lo que intento hacer a nivel de pruebas unitarias es simplemente probar la función simple, como por ejemplo, podría probar solo el reductor, puedo probar solo el hook por sí mismo y no probar los componentes de React. La forma en que estoy seguro de que los componentes de React funcionan es a través de pruebas de extremo a extremo con algo como Cypress o algo como Capybara, que prueba realmente todo mi flujo de trabajo porque rara vez he encontrado errores en mi sistema que se refieran solo al componente de React en sí. Por lo general, los errores provienen de hooks muy complejos o cuando tenemos componentes de clase. Así que sí, eso es básicamente lo que quería compartir con ustedes hoy. Gracias por acompañarme.