Otros Recursos gratuitos para pasar al Siguiente Nivel: 👉 Cursos para pasar conseguir un nuevo trabajo como programador: ruclips.net/p/PLkr7dGY4D2sOPtdV7H3MhY3Euj45vvTao ⚛ Curso de Patrones Avanzados en React.js: ruclips.net/video/_cilPGp_hRE/видео.html&ab_channel=Developero 👉 Suscríbete al canal si no quieres perderte vídeos como este: ruclips.net/user/developero 🌐 Sitio web: www.developero.io? 🌐 Descarga recursos gratuitos: developero.io/recursos-para-programadores? 🌐 LinkedIn: www.linkedin.com/company/developero/ 👉 JEST JS tutorial en español para PRINCIPIANTES | 🧑💻 Curso de Testing en Javascript: ruclips.net/video/tgWBQZNCOT0/видео.html&ab_channel=Developero
Excelente video!!! me aclaraste muchas dudas en la documentación de jest los ejemplos siempre muestran los tests de los archivos consumidores y no hacen énfasis en los de las dependencias lo cual me tenía algo confundido, tú video fue muy explicativo y practico
me gusto tu forma de explicar aunque me confundieron un poco los nombres de los archivos, pero de ahi en fuera pude entender perfectamente todo, gracias por tu ayuda!! :D
Hola amigo. Una pregunta Cuando nosotros hacemos el mock de la función, y hacemos que el resultado de la función sea determinístico diciendo de qué forma se va a ver y qué va a devolver con respecto a la API real ¿Qué pasa si el día de mañana el servicio externo cambia la forma de la respuesta, o el JSON? ¿Nuestra prueba pasaría pero en producción fallaría? ¿Cómo se manejan esos casos? Porque entiendo que mockear sería básicamente "crear una nueva función para ambiente de test que tenga el mismo comportamiento que en la vida real pero de una forma simulada y controlada" pero al pisar la respuesta del mock en el ambiente de test colocando lo que nosotros queramos; ¿no daría puerta a que los tests pasen pero la API haya cambiado? ¡Saludos!
Es correcto, el unit test puede pasar aunque en realidad el código no funcione como se espera en producción. Hay maneras de manejarlo. Lo primero: esa dependencia externa es controlada por mí o es de un tercero? Esto determina todo lo demás. Si depende de mi (o equipo u organización), todo reside en la comunicación humana interna. Pero si es de un tercero, no tengo control sobre ello. En el caso de una API, una manera es agregar un test con data mock o de prueba y validar la estructura del response y el status code que puede correr una vez al día y te alerte si hay errores (como cambios), lo malo es que haces requests reales y eso puede ser inconveniente según las condiciones de uso de la API. Otra manera es tener E2E tests de los puntos críticos donde son pruebas automatizadas que validan flujos completos de punto a punto en un entorno de pruebas. Si me preguntas, prefiero E2E. Puedes apoyarte de alguien experto en QA no importa si no sabe automation testing, te puede ayudar en el proceso mental de las pruebas. Y para E2E recomiendo usar Playwright, me ha gustado más que Cypress. Normalmente un QA con automation hace los E2E, pero no está escrito en piedra. Si puedes hacer algo para facilitarte la existencia, es buena idea hacerlo y si estás en una empresa, hasta puedes usarlo para pedir una promoción 🌚 Para mí, el mayor valor que encuentro en que un dev lo haga es que tomas más ownership del proyecto y te expones a cómo sería trabajar como si fueses tech lead o alguien con mayores responsabilidades, por si quieres hacer tu propio proyecto o si quieres subir la escalera corporativa.
Gracias. Digamos que en los lugares donde tuve que trabajar no se priorizaban en absoluto los tests, y muchas veces se hacían usando malas prácticas (de ello adquirí algunas). Lamentablemente, muchas veces por la presión termina dejando los tests de lado si no hay un QA y ciertamente, no gané esa habilidad de testing aunque sí me parece súper interesante tenerlo como habilidad. Lo único que pude hacer es testing (pero sin usar mocks) más que nada porque por los lugares donde pasé nadie se dedicaba a ello / no le daban importancia. Tengo aprox 3 años de experiencia con un conocimiento de testing básico pero fuerte en full-stack pero nunca profundicé la verdad en testing (y me lamento por ello), siempre he utilizado malas prácticas desde ese lado y me gustaría mejorarlo. ¿Conoces o tienes alguna guía para comenzar a hacer testing? Hablo desde un lado más generico, que los conceptos me sirvan tanto como backend y frontend de tal manera que no me ate al conocimiento de testing en un solo ambiente porque considero que está bueno saber de una forma genérica y luego se aprende x framework en específico. Gracias!
@@tomihq de quien yo aprendí más ha sido de Kent C Dodds, te lo recomiendo ampliamente: kentcdodds.com/ De mi parte, tengo estos posts en li blog: developero.io/tags/testing y los demás videos de este canal :D
Buen video amigo! aprendi mucho! Nose si dejarlo como feedback o no o si a alguien mas le paso que el tema confude un poco jaja quizas solo a mi, pero eso no quita la calidad del contenido, gracias !
Si te refieres a ejecutar un archivo de test en específico, puedes hacerlo pasando un segundo argumento al ejecutar el test: vitest my-file.test.tsx por ejemplo. Si te refieres al modo watch, vitest por default ejecuta los tests en ese modo, aquí puedes encontrar más al respecto: vitest.dev/guide/features.html#watch-mode A esto te referías?
@@Developero he intentado hacer la prueba a un fetch pero con vitest. Y el método que usas para traer la repuesta json: () => Promise.resolve no lo he podido hacer en vitest. Creo que tu mokeas el node-fetch pero instale el paquete en vitest y me dio error. Que lógica me recomiendas
Si hago test de un post, tendría qué hacer mock al controlador o a la función que llama el controlador, que en este caso sería la que crea el nuevo recurso. ¿A cuál debería hacerle mock? El problema que tengo ahora es que al hacer el test crea el recurso y por ende en subsiguientes tests va a fallar porque ya existe y la idea es emular la acción de del controlador y sus dependencias ( la otra función que se encarga de hacer el query para crear el nuevo recurso, usuario etc)
Normalmente, cuando hago un mock, lo hago para la capa de base de datos, de modo que mis tests no afecten a la misma. La manera en que lo hago es haciendo un request real a mi API, y válido el response (status http, body, por ejemplo).
@@Developero o sea en el test si fuese post te conectarias a la base de datos igual? Y el tema para evitar que se cree el recurso, como haces? Porque puede salir bien en el primer intento pero después fallara porque ya existe
@@Developero como puedo evitar que afecte a la base de datos, de ahí mi pregunta si tengo que hacer mock al controlador o a la función que llama a la base de datos para crear el recurso
Gracias por el video, tengo una duda sobre el tema. Cuando compruebo el coverage al mockear la función, el test lo pasa sin problema, pero la función sale como no cubierta y no entiendo el por que. Además, me surge la duda de como se haría en caso de no tener la función exportada, como por ejemplo si esta estuviera dentro de un componente de react. Un saludo.
Para el tema del coverage, cuando haces un mock de un módulo (sea un archivo que exporta funciones), ese módulo al momento de ser importado en la prueba, va a ser reemplazado por el mock, o sea que tiene sentido que no tenga coverage si lo estás mockeando. Tendrías que agregar pruebas particulares para ese módulo si quieres que esté cubierto por el coverage, o hacer un test de integración donde no hagas mock de ese módulo. Para la pregunta de cómo mockear una función no exportada que esté dentro de un componente de React, hay diferentes posibilidades. Podrías actualizar el código para separar la función del componente de React y exportarlo, por ejemplo. Tengo varios vídeos sobre tests en React JS, te recomiendo esta lista de reproducción donde tengo varios casos, pero en palabras cortas: no suelo hacer mocks en React, para llamadas a apis uso MSW (vídeo sobre ello también): ruclips.net/p/PLkr7dGY4D2sNVB1pqpGKFsDubkANQve_u
@@Developero muchas gracias por la ayuda, es que actualmente trabajo con React y algunos escenarios para los test se me complican. Por ejemplo, tengo un componente Login, con funciones en este, y en el return del Login, invoco un componente ModalLogin que recibe por props las funciones a testear del login. Y aquí viene el problema, al no tener boton que llame a esas funciones en el login, no se me ocurre como pasar sus test. He visto ejemplos donde hacen jest.mock del componente hijo, pero no termino de entender muy bien.
Hola! No tengo algo concreto para hacer mock de Firestore, Pero lo que puedes hacer es una abstracción de funciones “services” que sean funciones de JS y dentro ejecuten operaciones de firestore, y mockear esas funciones
Gracias por tu comentario! la publicidad viene por lado de RUclips, es un modelo de negocio en el que los creadores de contenido podemos crear y publicar vídeos útiles como éste totalmente gratis para ti y se monetiza con terceros (quienes pagan por poner la publicidad) :D
Hermano, deberías dejar al menos un repo que usas con el config basico, o con los archivos ya escritos, asi seguirte desde 0 y escribir linea por linea es un dolor.
Hola! Gracias por tu feedback, lamento que pase eso, de momento te comparto este link en el que vienen varios ejemplos e incluso más sobre hacer mocks con jest: developero.io/blog/jest-mock-module-function-class-promises-axios-y-mas me comentas si te ha servido!
Hola! La publicidad es parte del modelo de negocio que permite poder entregar contenido de valor de manera gratuita, no tanto por monetizar como creador de contenido sino como hacer posible que RUclips pueda ser gratuito y accesible para todos.
muy basico..no se ocuparon parametros , tampoco testeadno un POST, tampoco AXIOS.... dislike video..solo sirve para apis gratis que devuelven un texto,,realmente una Basura!
Oye, tranquilo viejo, esa no es la actitud de un colega profesional, si estás frustrado no te desquites en un video de RUclips 🌚 Y para el tema de POST y parámetros, realmente es exactamente lo mismo a que si hicieras mock a una API o a una función, exactamente lo mismo, es de lo más básico.
Otros Recursos gratuitos para pasar al Siguiente Nivel:
👉 Cursos para pasar conseguir un nuevo trabajo como programador: ruclips.net/p/PLkr7dGY4D2sOPtdV7H3MhY3Euj45vvTao
⚛ Curso de Patrones Avanzados en React.js: ruclips.net/video/_cilPGp_hRE/видео.html&ab_channel=Developero
👉 Suscríbete al canal si no quieres perderte vídeos como este: ruclips.net/user/developero
🌐 Sitio web: www.developero.io?
🌐 Descarga recursos gratuitos: developero.io/recursos-para-programadores?
🌐 LinkedIn: www.linkedin.com/company/developero/
👉 JEST JS tutorial en español para PRINCIPIANTES | 🧑💻 Curso de Testing en Javascript: ruclips.net/video/tgWBQZNCOT0/видео.html&ab_channel=Developero
Excelente video!!! me aclaraste muchas dudas en la documentación de jest los ejemplos siempre muestran los tests de los archivos consumidores y no hacen énfasis en los de las dependencias lo cual me tenía algo confundido, tú video fue muy explicativo y practico
Me da gusto que te haya ayudado a aclarar conceptos!
me gusto tu forma de explicar aunque me confundieron un poco los nombres de los archivos, pero de ahi en fuera pude entender perfectamente todo, gracias por tu ayuda!! :D
Genial que te ayudara!
Ahora la próxima vez que necesites hacer un mock con jest, ya sabrás cómo implementarlo :D
Hola amigo. Una pregunta
Cuando nosotros hacemos el mock de la función, y hacemos que el resultado de la función sea determinístico diciendo de qué forma se va a ver y qué va a devolver con respecto a la API real ¿Qué pasa si el día de mañana el servicio externo cambia la forma de la respuesta, o el JSON? ¿Nuestra prueba pasaría pero en producción fallaría? ¿Cómo se manejan esos casos?
Porque entiendo que mockear sería básicamente "crear una nueva función para ambiente de test que tenga el mismo comportamiento que en la vida real pero de una forma simulada y controlada" pero al pisar la respuesta del mock en el ambiente de test colocando lo que nosotros queramos; ¿no daría puerta a que los tests pasen pero la API haya cambiado?
¡Saludos!
Es correcto, el unit test puede pasar aunque en realidad el código no funcione como se espera en producción.
Hay maneras de manejarlo.
Lo primero: esa dependencia externa es controlada por mí o es de un tercero?
Esto determina todo lo demás.
Si depende de mi (o equipo u organización), todo reside en la comunicación humana interna.
Pero si es de un tercero, no tengo control sobre ello.
En el caso de una API, una manera es agregar un test con data mock o de prueba y validar la estructura del response y el status code que puede correr una vez al día y te alerte si hay errores (como cambios), lo malo es que haces requests reales y eso puede ser inconveniente según las condiciones de uso de la API.
Otra manera es tener E2E tests de los puntos críticos donde son pruebas automatizadas que validan flujos completos de punto a punto en un entorno de pruebas.
Si me preguntas, prefiero E2E. Puedes apoyarte de alguien experto en QA no importa si no sabe automation testing, te puede ayudar en el proceso mental de las pruebas.
Y para E2E recomiendo usar Playwright, me ha gustado más que Cypress.
Normalmente un QA con automation hace los E2E, pero no está escrito en piedra.
Si puedes hacer algo para facilitarte la existencia, es buena idea hacerlo y si estás en una empresa, hasta puedes usarlo para pedir una promoción 🌚
Para mí, el mayor valor que encuentro en que un dev lo haga es que tomas más ownership del proyecto y te expones a cómo sería trabajar como si fueses tech lead o alguien con mayores responsabilidades, por si quieres hacer tu propio proyecto o si quieres subir la escalera corporativa.
Gracias. Digamos que en los lugares donde tuve que trabajar no se priorizaban en absoluto los tests, y muchas veces se hacían usando malas prácticas (de ello adquirí algunas).
Lamentablemente, muchas veces por la presión termina dejando los tests de lado si no hay un QA y ciertamente, no gané esa habilidad de testing aunque sí me parece súper interesante tenerlo como habilidad.
Lo único que pude hacer es testing (pero sin usar mocks) más que nada porque por los lugares donde pasé nadie se dedicaba a ello / no le daban importancia.
Tengo aprox 3 años de experiencia con un conocimiento de testing básico pero fuerte en full-stack pero nunca profundicé la verdad en testing (y me lamento por ello), siempre he utilizado malas prácticas desde ese lado y me gustaría mejorarlo.
¿Conoces o tienes alguna guía para comenzar a hacer testing? Hablo desde un lado más generico, que los conceptos me sirvan tanto como backend y frontend de tal manera que no me ate al conocimiento de testing en un solo ambiente porque considero que está bueno saber de una forma genérica y luego se aprende x framework en específico.
Gracias!
@@tomihq de quien yo aprendí más ha sido de Kent C Dodds, te lo recomiendo ampliamente: kentcdodds.com/
De mi parte, tengo estos posts en li blog: developero.io/tags/testing y los demás videos de este canal :D
muchas gracias amigo me ayudo a entender mejor los mocks
Me da gusto que te ayudara!
Hermano, sos un genio. Me re sirvió tu vídeo
Gracias
Si tienen un error intenso con jest,y el import prueben usando la version @2 de node-fetch, no la 3.
yarn add node-fetch@2
o
npm i node-fetch@2
Gracias por el tip!
Me salvaste de varias horas de quemarme la cabeza! Muchas gracias :D
he comprado tu curso en gumroad y me esta encantando
Hola! Me da gusto :D cualquier duda me dices ;D
Buen video amigo! aprendi mucho! Nose si dejarlo como feedback o no o si a alguien mas le paso que el tema confude un poco jaja quizas solo a mi, pero eso no quita la calidad del contenido, gracias !
Gracias por tu comentario!
Muchas gracias amigo, es una excelente guia.
Me alegra que te sirviera :D
Tienes algun consejo para hacer lo que hiciste en el minuto 30 pero con Vitest?
Si te refieres a ejecutar un archivo de test en específico, puedes hacerlo pasando un segundo argumento al ejecutar el test: vitest my-file.test.tsx por ejemplo.
Si te refieres al modo watch, vitest por default ejecuta los tests en ese modo, aquí puedes encontrar más al respecto: vitest.dev/guide/features.html#watch-mode
A esto te referías?
@@Developero he intentado hacer la prueba a un fetch pero con vitest. Y el método que usas para traer la repuesta json: () => Promise.resolve no lo he podido hacer en vitest. Creo que tu mokeas el node-fetch pero instale el paquete en vitest y me dio error. Que lógica me recomiendas
Si hago test de un post, tendría qué hacer mock al controlador o a la función que llama el controlador, que en este caso sería la que crea el nuevo recurso. ¿A cuál debería hacerle mock? El problema que tengo ahora es que al hacer el test crea el recurso y por ende en subsiguientes tests va a fallar porque ya existe y la idea es emular la acción de del controlador y sus dependencias ( la otra función que se encarga de hacer el query para crear el nuevo recurso, usuario etc)
Normalmente, cuando hago un mock, lo hago para la capa de base de datos, de modo que mis tests no afecten a la misma.
La manera en que lo hago es haciendo un request real a mi API, y válido el response (status http, body, por ejemplo).
@@Developero o sea en el test si fuese post te conectarias a la base de datos igual? Y el tema para evitar que se cree el recurso, como haces? Porque puede salir bien en el primer intento pero después fallara porque ya existe
@@Developero como puedo evitar que afecte a la base de datos, de ahí mi pregunta si tengo que hacer mock al controlador o a la función que llama a la base de datos para crear el recurso
@@Developero cuando dices la capa de bases de datos te refieres como a los métodos / funciones que hacen las queries etc?
@@TheMrblaster2012 así es :D
genio! Qué theme usás en VSCode? es muy bueno
Ya no recuerdo jeje pero creo que era winter is coming
@@Developero gracias!
Hola master, consulta, donde podria encontrar info o ejemplos para hacer testing a los createSlices y los createAsyncThunk? muchas gracais
Esto te puede interesar: redux.js.org/usage/writing-tests#connected-components
se puede mezclar en el mismo archivo de test valores mockeados con valores reales posibles? osea usar mock en un test mock y a en otro no.
Sí es posible, en esta parte de la doc viene un ejemplo: jestjs.io/docs/mock-functions#mocking-partials
Gracias por el video, tengo una duda sobre el tema. Cuando compruebo el coverage al mockear la función, el test lo pasa sin problema, pero la función sale como no cubierta y no entiendo el por que. Además, me surge la duda de como se haría en caso de no tener la función exportada, como por ejemplo si esta estuviera dentro de un componente de react.
Un saludo.
Para el tema del coverage, cuando haces un mock de un módulo (sea un archivo que exporta funciones), ese módulo al momento de ser importado en la prueba, va a ser reemplazado por el mock, o sea que tiene sentido que no tenga coverage si lo estás mockeando.
Tendrías que agregar pruebas particulares para ese módulo si quieres que esté cubierto por el coverage, o hacer un test de integración donde no hagas mock de ese módulo.
Para la pregunta de cómo mockear una función no exportada que esté dentro de un componente de React, hay diferentes posibilidades.
Podrías actualizar el código para separar la función del componente de React y exportarlo, por ejemplo.
Tengo varios vídeos sobre tests en React JS, te recomiendo esta lista de reproducción donde tengo varios casos, pero en palabras cortas: no suelo hacer mocks en React, para llamadas a apis uso MSW (vídeo sobre ello también):
ruclips.net/p/PLkr7dGY4D2sNVB1pqpGKFsDubkANQve_u
@@Developero muchas gracias por la ayuda, es que actualmente trabajo con React y algunos escenarios para los test se me complican.
Por ejemplo, tengo un componente Login, con funciones en este, y en el return del Login, invoco un componente ModalLogin que recibe por props las funciones a testear del login.
Y aquí viene el problema, al no tener boton que llame a esas funciones en el login, no se me ocurre como pasar sus test.
He visto ejemplos donde hacen jest.mock del componente hijo, pero no termino de entender muy bien.
gracias tu video me ayudo mucho.
Con mucho gusto :D
Hola estoy buscando como hacer mock a firestore de gcp la conexion a la db, tienes algo sobre eso para mirar en nodejs, gracias bro
Hola! No tengo algo concreto para hacer mock de Firestore,
Pero lo que puedes hacer es una abstracción de funciones “services” que sean funciones de JS y dentro ejecuten operaciones de firestore, y mockear esas funciones
Por que no necesitas hacer el import de jest si estás usando es6?
Por la configuración que incluye create react app, ya lo incluye globalmente al ejecutar los tests
@@Developero Estoy intentando hacer esto mismo con node es6 y soy incapaz😭.
Gracias por el vídeo está muy bien explicado
Muy buen video. Gracias, pero tiene mucha publicidad innecesaria
Gracias por tu comentario! la publicidad viene por lado de RUclips, es un modelo de negocio en el que los creadores de contenido podemos crear y publicar vídeos útiles como éste totalmente gratis para ti y se monetiza con terceros (quienes pagan por poner la publicidad) :D
@@Developero Esta perfecto, gracias por el contenido! 😎
amigo como uso los mocks con typescript
Aquí puedes encontrar información al respecto: blog.logrocket.com/testing-typescript-apps-using-jest/
Hermano, deberías dejar al menos un repo que usas con el config basico, o con los archivos ya escritos, asi seguirte desde 0 y escribir linea por linea es un dolor.
Hola! Gracias por tu feedback, lamento que pase eso, de momento te comparto este link en el que vienen varios ejemplos e incluso más sobre hacer mocks con jest:
developero.io/blog/jest-mock-module-function-class-promises-axios-y-mas
me comentas si te ha servido!
Está genial el vídeo pero tiene demasiada publicidad....
Hola! La publicidad es parte del modelo de negocio que permite poder entregar contenido de valor de manera gratuita, no tanto por monetizar como creador de contenido sino como hacer posible que RUclips pueda ser gratuito y accesible para todos.
utilizá la extensión ad-block para chrome
es la manera en la que puede traer esto de manera gratuita amigo...la gente también necesita comer. No seas egoista.
muy basico..no se ocuparon parametros , tampoco testeadno un POST, tampoco AXIOS.... dislike video..solo sirve para apis gratis que devuelven un texto,,realmente una Basura!
Oye, tranquilo viejo, esa no es la actitud de un colega profesional, si estás frustrado no te desquites en un video de RUclips 🌚
Y para el tema de POST y parámetros, realmente es exactamente lo mismo a que si hicieras mock a una API o a una función, exactamente lo mismo, es de lo más básico.
Me encanta, me ayudo mucho! muchisisismas gracias ! 🥰🥹
Con mucho gusto :)
@@Developero Ya hasta compre mi curso de udemy, thanks de nuevo :')
@@sueluceromartinezherrera1825 Cualquier duda que tengas me dices :D