Habemus testing ! con de tuti y como se debe con Jest y Testing Library ! tips y trucos

¡Buenas, buenas mi gente!
Con de tuti con una masterclass de Testing !
Bases
React Hook Form
Axios
Jest
Testing library
UserEvent
Expect
Describe
It
Yup
Validaciones
Manejo de erroes
y mucho más !
A por ello !
Código de la clase: github.com/Gen...
Si quieres hacer una donación: streamelements...
▬ Links de interés ▬▬▬▬▬▬▬▬▬▬
Link a Twitch: t.co/vodIqiCH9N
Link a Spotify: spoti.fi/3y281cY
Link a la comunidad: / discord
Link a la comunidad de Facebook: shorturl.at/jkmL6
Link a instagram: / gentlemanprogramming
Link a twitter: / g_programming
Link al libro "Cómo ser front-end sin fallar en el intento: Tus primeros pasos en la programación": amzn.to/2ReBuzL
#comunidad #discord #programming #podcast #live #stream #clase #ReactJs #customHooks #hooks #lifecyle #componentes #framework #library

[@programmingj613]

No sabes como miro tus videos despues del laburo, me motivas dia a dia. Gracias por los videos!

[@gentlemanprogramming]

Y tu con tu comment me motivas a mi, muchas muchas gracias !!!!

[@nicolasmayorga8288]

Viendo esta maravilla a las 11:31 PM aprendiendo cositas nuevas, muchas gracias por tu tiempo y dedicacion.

[@crateflexwave15]

Una clase magistral, muy completo y útil, sobre todo lo de axios que es el cuco cuando uno se topa con testear asincronismo y llamadas

[@scarfacethebest]

Esto sí es contenido de calidad!

[@rodriorozco7123]

Graciaaaas Alan!!! contenido de calidad y súper bien explicado, no te puedo explicar lo mucho que aprendo de vos y lo que me ayudas, sos un crack amigo!! Saludos :)

[@gentlemanprogramming]

Gracias Rodri !!! A darle con todo, yo doy una parte pero ustedes dan la más importante…las ganas de aprender. Con de tuti con los siguientes content !!!

[@armandocastro6733]

Excelente , gracias por compartir esas perlas, tremendos tips ,contenido para la posteridad jejejeje, creo que es tu mejor clase de toda esta ultima trilogía 😎🔥 pura flama saludos desde Venezuela

[@gentlemanprogramming]

Esaaaaa, gracias miles Armando 🥹🥹

[@snk263]

que bien me viene esto! un genio como siempre!

[@gentlemanprogramming]

Graciaaaaaas

[@kantyDarius]

Banco fuerte fuerte este canal 🤘👏

[@gentlemanprogramming]

Y yo banco fuerte tu comentario !! 🥰🥰

[@benitoalvarez8032]

Me encanto, te agradezco el contenido y ojala te encuentres bien loco. Saludos!

[@gentlemanprogramming]

Estamos de lo más bien, gracias miles !!!

[@matiasromera330]

excelente video master! tengo un warning en el screen.debug(), y además para correr el jest test --coverage tengo que ponerle el pnpm antes sinó no lo corre, así pnpm jest test --coverage, raro porque está instalado jest en el proyecto pero que se yo jaja, ha sido todo muy loco pero se aprendió bastante, gracias!

[@gentlemanprogramming]

Yes ! es que se ejecuta por medio de pnpm / node etc. En mi caso personal tengo un script en el package.json para hacerlo más rápido: "test": "jest", "test:coverage": "jest --coverage", "test:watch": "jest --watch",

[@MartínCanolik]

Gracias hermano por tanto!

[@deboramakita6589]

Buenísimo contenido como siempre, muchas gracias

[@gentlemanprogramming]

Gracias Debora !!!! 🤓

[@cuaticito]

Tremenda clase pegaste Alan, información de primera. Muchas gracias por compartir tus conocimientos man. Quisiera compartir una solución que encontré para aquellos que tengan el mismo problema que yo en el test it('should call the onSubmit function when the submit button is clicked', async () => { ..........} Especificamente en 1hs 52min 20seg, del video, no me pasa ese test por la asincronia, por tanto al hacer el click el botón aún está disabled ... pero lo solucioné de esta manera ... await waitFor(() => { expect(submitButton).toBeEnabled(); }); await userEvent.click(submitButton); await waitFor(() => { expect(axios.post).toHaveBeenCalledTimes(1); });

[@ricko13]

Yo soy el que te da like antes de ver el video 🔥

[@gentlemanprogramming]

No soy digno de ese like hasta que lo veas ni de tu comment🥹🥹

[@kengyamoncada8529]

Crack! amor a la programación ♥ inspriras.

[@rafaelcisnerosgomez7295]

BUENISIMO!!!!!!!

[@nicolasf.9139]

Hola Alan, muy bueno el video! tengo una consulta, en el minuto 1:56, mencionas que hay que mockear los componentes hijos, en ese caso, si cada uno tienen sus propios test, deberia de igual mockearlos? porque ya esas partes estarian cubiertas. Gracias!

[@gentlemanprogramming]

Exactamente ! La idea es que como ya están testeados con sus propios unit test, nos abstraemos de ellos haciendo un mock de los mismos en los componentes padres.

[@nicolasf.9139]

@@gentlemanprogramming Muchas gracias por la respuesta. La verdad que no lo sabía y estaba sufriendo bastante en mi trabajo jaja. Sos un genio!

[@franciscoguedez9342]

Maestro, como puedo crear los componentes de ese formulario, desde cero para entender el proceso, es reutilizable

[@gentlemanprogramming]

Buenas Francisco !! en el vídeo los estamos haciendo de 0 ! y estamos usando React hook form como libreria de formularios :) react-hook-form.com

[@OneworldKW]

Estaria bueno un video asi de principiantes sobre react. Aun que sea cortito

[@gentlemanprogramming]

Tengo ! Fíjate mi mentoring de ReactJs. Aunque seguro voy a hacer algo mas estilo hacer una app de 0 tanto en React como Angular 🤓

[@gustavochavarria6624]

10/10

[@gentlemanprogramming]

Tu comment es un 10|10 😬

[@andresmauriciofajardoolaya2721]

recomiendas testing library para angular? o seguirá siendo mejor usar el query selector que ya nos brinda jasmine

[@gentlemanprogramming]

Lo súper recomiendo, hasta Jest 🥵

[@rainbow-jw3og]

Hola Gentleman, te vengo a pedir un consejo, si uno de los temas de la entrevista es testing que te podrian llegar a preguntar? yo solo vi test unitarios con supertest pero no se que concepto teorico podrian preguntarme.

[@gentlemanprogramming]

Buena pregunta ! Mas que nada te preguntaran tu experiencia con las herramientas que utilice la empresa, como haces los mock, como mockeas las llamadas a los endpoint, tu filosofía para hacerlo, etc. Es muy dependiente de lo que use la empresa.

[@kevyyar]

El error gran master es de que le estabas pasando el OR incorrectamente en el disabled prop de button. Debio haber sido dos "||" en vez de una "|"... Y en el custom input component de password se le olvido el type="password", solo un mini code review master!

[@gentlemanprogramming]

Totalmente de acuerdo! Thank you 😊

[@juansinlimites7609]

Hoy aprenderemos a crear test para evitar errores en nuestro código ▶ 1:14:32 Da igual, ese error nos la suda, total el test pasa. HAHAHA

[@gentlemanprogramming]

Jajajajja es que es un warning que la verdad se estaba quejando porque pase una prop disabled con un valor que no le gustó, quería un boolean y eso es lo que le dimos.

[@juansinlimites7609]

@@gentlemanprogramming Sos un crack! Te agradezco muchísimo todo el contenido que compartes, es de calidad. Me pegué un buen rato riendo, tienes mucho arte amigo. Enhorabuena y gracias de nuevo, más gente como tú necesita la comunidad.

[@gentlemanprogramming]

@@juansinlimites7609 muchas muchas gracias !!!!

[@fernandopajon1017]

cómo se me complica para instalar las dependencias y eso lpm :(

[@alonsomorante990]

1:06:00