React Vitest Tutorial, Unit Testing con React Testing Library y Typescript
Vložit
- čas přidán 24. 11. 2022
- Aprende a hacer testing de tus componentes de React usando Vitest, un Frameworks de Testing Unitarios (Unit Testing), para proyectos de Javascript y Typescript basado en Vite, el generador de proyectos. En este tutorial crearemos un componente y aprenderemos a hacer testing configurando un entorno de vite con React, Typescript, jsdom y el uso de React Testing Library. Este es un ejemplo para aquellos desarrolladores frontend que ya conocen las bases de react y ahora quiren crear sus primeros Test en React.
💻 Código del Proyecto: github.com/fazt/react-vitest
⭐ Cursos Recomendados
⮕ Curso de React • Curso de Reactjs desde...
⮕ Curso de Javascript para React • Javascript para Aprend...
⮕ Curso de Nodejs • Nodejs Curso Práctico ...
⮕ MPA vs SPA • Aplicaciones SPA vs MP...
⮕ Nodejs y Jest Testing • Nodejs Testing con Jes...
⮕ MERN Stack • MERN Stack con Context...
🗣 Redes Sociales
⮕ Twitter / fazttech
🎒 Servicios Recomendados
⮕Ledger (Hardware Wallet) bit.ly/3ijsVNW
⮕ SiteGround bit.ly/31u9ZEk
⮕ Cloudinary bit.ly/3ohNlJ7
⮕ Namecheap namecheap.pxf.io/ErDe9
🌎 Sitio Web
fazt.dev
#reactjs #vitest #desarrolloweb - Věda a technologie
Even though my Spanish is at a very basic level I was able to follow and understand what you were saying. This was a great introduction to testing! I particularly enjoyed how you showed how you setup Vitest for React component testing (and not just jumping in assuming people know how to do that) and then displayed a nice TDD of adding the tests first and making sure they pass and then refactor. Awesome stuff!!
Un angloparlante buscando tutoriales en Español, curioso jeje.
@@LaminaFerro Crei que nunca vería semejante cosa jajaj
El testing es sin duda una de mis asignaturas pendientes. Muchas gracias por este contenido Fazt
Gracias por el vídeo Fazt. Es una de las cosas que tengo por aprender y hiciste que no se vea tan díficil.
Excelente introducción a vitest! Muchas gracias! espero por mas contenido sobre testing! 🙌
Muchas gracias por el video, llevo 3 días tratando de implementar testing con ts en un proyecto y me aclaraste muchas dudas
Hola, estaba buscando información sobre testing y este video me ha servido mucho, gracias por tu trabajo, te felicito
ohh amigo, grande!! ojala sigas haciendo tutoriales de testing con react y vitest, por ejemplo cómo podemos testear llamados a una api o actions y reducers, o cómo comprobar que una imagen se renderiza. Muchas gracias por el gran aporte
Un crack y siempre actualizandose!
Está muy bien explicado.
Saludos.
HERMOSO tenia horas buscando un video que valiera la pena en cuanto a explicacion
uff justo lo que estaba buscando, Gracias por el video!! es como que me leíste la mente y pensaste en mi para ayudarme
Impecable como siempre Fazt, muchas gracias, saludos de Argentina
que grande faztt me encatan tus videos, soy tu fan
por fin!
Gracias por compartir.
Que buen contenido, gracias fazt
Muy buen amigo me ayudo a enteder y aprender sobre los test
Gracias! Me sirvió bastante
Maestro de maestros.
Al fin el tuto vitest tkm
Gracias, como siempre, muy claro . Me gustaría un ejemplo de Vitest con Sveltekit. Saludos desde Colombia
Gracias de verdad !! 💜
Great video!
Es genial este men, enseña rapido y al grano y al mismo tiempo explica perfecto, me gustaria encontrar a alguien asi para JAVA conocen a alguien??
Hay bastantes cracks de la India, pero debes saber inglés eso sí
Muchas gracias Fazt. Dios te bendiga, gracias a ti he aprendido mucho. Podrias hacer uno de Svelte Vitest.
Gracias bro, muy bueno. Tus videos son los mejores!!
en todo lo q necesito tenes un video, tekero
Muchas gracias por esta introducción al testing justo con las herramientas que estoy queriendo empezar a dominar de manera diestra (Typescript+Vite+React). Dalo por seguro que cuando consiga mi primer trabajo en el rubro IT me haré miembro de tu canal!
No sé si es mucho pedir un tutorial medianamente avanzado con estas mismas tecnologías (Typescript-Vite-React) para gente como yo que esta pasando de Javascript a Typescript. Mil gracias por todos los tutoriales de igual manera!
PD: Se pueden hacer solicitudes de tutoriales específicos si se realizan donaciones?
Que haria sin ti Fazt . Espero que estes bien y muchos exitos :v
Fazt podrías hacer una intro acerca de single-spa. Tus aportes son otro nivel.
Fazt , tienes pensado subir más material sobre Vitest ? para poder hacer testing de las apps que vamos creando en los videos y demas , un saludo , se agradece todo el material que subes
excelente
Genial
Muy buen video.
Solo una acotación, al usar beforeEach para el render, como mencionaste cada nuevo test hará render del componente, por lo que al buscar un texto te puede fallar por haber encontrado el texto en más de una ocasión. Por ejemplo, si creas dos veces exactamente el mismo test "should show title all the time", los test dejarán de pasar, ya que encontrará dos veces el "hola" y no sabrá diferenciar a cual te refieres. Quizás para el caso del render tiene más sentido usar beforeAll que también ejecuta el render antes de cada test, pero lo hará solo una vez.
Saludos!
Es mismo estaba notando....
buen tutorial, recomiendo la estenxion de visualstudio code vitest
Saludos Fazt! Gracias por tus contenidos y tus aportes. Te pregunto algo, tengo un proyecto con vite pero no implementa Typescript. Esto me serviria?
bello
Hola Fazt... Te felicito por tu trabajo, eres grande. Dónde puedo aprender TS?
Hola, una ayuda pls en caso de usar nextjs con vitest y quiero hacer lo de globals : true, obvio no puedo poner"Vite/client", en mi caso, que se pondria?
Crear test con ayuda de la IA es un alivio, obviamente no te lo deja todo listo, pero te sirve como template para ir modificando y agregando más detalles.
Buen video. Podrias hacer un tutorial de vitest con vue?
A la hora de subir el proyecto subimos los test tambien no ? , podrias hacer un ejemplo de una buena estructura con test o si alguno tiene algun repo libre que contenga buenos test para practicar y visualizar podria comentarme ?
Uno con Vue por favor, saludos desde México!
Fazt una introducción de webassembly con c++ podría ser ?
Fazt, yo en forma de opinion, te diria, que como explicas tan bien, seria bueno de parte tuya, algunos videos de dessarollo en blockchain (SOLANA) web 3.0
Midu??
@@Deus-lo-Vuilt Jajajajajaja me equivoque :o
me gustaría ver vitest en vite-vue en un login por ejemplo, y también me daría curiosidad luego testing e2e con cypress
Master 🤯
Fazt gracias por tu contenido, ¿Cuál sería el mejor tester para trabajar con Next.js?
De momento yo diria que Jest y Cypress
Con Vue
No funciona con Next?
Wou me gusta como se ve tu terminal en el Visual Studio Code, Como le hiciste?
Hola Vinci, Este es el tutorial de esta terminal: czcams.com/video/d9y0l7yY404/video.html
como hago para no llamar las funciones? uso javscript.
Como pongo mi consola así como la tuya en el video
Recomiendas vitest o jest para trabajar con vite?
Ambos son usados, de momento usaría Jest aún porque Vitest aún está en desarrollo, pero apenas tenga su versión 1 planeo utilizarlo más a fondo
Podrías hacer lo mismo con Vue?
Es una buena idea, voy a publicar algo pronto :)
Sería de gran ayuda @@FaztCode !
falto algun test para un componente que esta usando hooks D: