CursosEmpresasBlogLiveConfPrecios

Watch y Coverage

Clase 6 de 16 • Curso de Unit Testing con Jest en React

Clase anteriorSiguiente clase

Contenido del curso

Bienvenida

  • 1
    Bienvenido al Curso de Jest

    Bienvenido al Curso de Jest

    01:09 min
  • 2
    ¿Qué es un Test? ¿Qué tipos de Test Existen? Jest

    ¿Qué es un Test? ¿Qué tipos de Test Existen? Jest

    03:19 min

Introducción a Jest

  • 3
    Preparación del entorno con Jest

    Preparación del entorno con Jest

    09:07 min
  • 4
    Implementando pruebas para Boolean y Array

    Implementando pruebas para Boolean y Array

    08:20 min
  • 5
    Implementando pruebas a promesas

    Implementando pruebas a promesas

    08:30 min
  • 6
    Watch y Coverage

    Watch y Coverage

    Viendo ahora

Usando Jest con React

  • 7
    Preparar proyecto

    Preparar proyecto

    13:35 min
  • 8
    Crear mocks

    Crear mocks

    11:32 min
  • 9
    Implementar provider mock

    Implementar provider mock

    14:15 min
  • 10
    Snapshot

    Snapshot

    08:32 min
  • 11
    Probar Actions

    Probar Actions

    05:21 min
  • 12
    Probar Reducers

    Probar Reducers

    07:24 min
  • 13
    Probar peticiones fetch

    Probar peticiones fetch

    10:12 min

Deploy y CI con Travis

  • 14
    Jest + CI

    Jest + CI

    09:02 min
  • 15
    Probando el proyecto antes de hacer deploy

    Probando el proyecto antes de hacer deploy

    07:49 min
  • 16
    Recapitulación y cierre

    Recapitulación y cierre

    00:56 min
  • Tomar el examen del curso
    • Edwin García

      Edwin García

      student•
      hace 6 años

      No es necesario instalar Jest de manera global para usar el comando de esa forma. Hay dos opciones, una sería crear el comando en el package.json y correr el script correspondiente y la otra sería usando el prefijo npx así:

      npx jest src/__test__/index.test.js
        Juan Gaybre Flores

        Juan Gaybre Flores

        student•
        hace 5 años

        A mi me permitió correr solo la prueba del archivo index indicándole la ruta después del comando npm run test

        2020-07-16_15h34_26.png
        Rafael Alvarez Cardona

        Rafael Alvarez Cardona

        student•
        hace 5 años

        @JuanGaybre! muchas gracias! tambien me funcionó :D

      Jorge Eliecer Rangel Jimenez

      Jorge Eliecer Rangel Jimenez

      student•
      hace 6 años

      Funcion randomAnimals

      const animals = [ "🐶", "🐱", "🐭", "🐹", "🐰", "🐻", "🐼", "🐨", "🐯", "🦁", "🐮", "🐷" ]; const randomAnimal = () => { const animal = animals[Math.floor(Math.random() * animals.length)]; return animal; }; module.exports = randomAnimal;

      Prueba

      const randomAnimals = require("../index"); describe("Probar funcionalidades de randomAnimals", () => { test("Probar la funcionalidad", () => { expect(typeof randomAnimals()).toBe("string"); }); test("Probar que no existe un animal", () => { expect(randomAnimals()).not.toMatch(/🦓/); }); });
        Oscar Barajas Tavares

        Oscar Barajas Tavares

        Team Platzi•
        hace 6 años

        Excelente. 👍

        Bernardo Aguayo Ortega

        Bernardo Aguayo Ortega

        student•
        hace 5 años

        muy buena explicación!!

      Alan David R.L.

      Alan David R.L.

      student•
      hace 6 años

      Watch y Coverage

      index.js

      const videogames = [ "Sekiro", "Call of Duty", "Death Stranding", "Gears 5", "Devil May Cry" ]; const randomString = () => { const string = videogames[Math.floor(Math.random() * videogames.length)]; return string; }; module.exports = randomString;

      index.test.js

      const randomStrings = require("../index"); test("It should return a string", () => { expect(typeof randomStrings()).toBe("string"); });

      Haciendo uso de jest podemos hacer test a un solo archivo, esto lo hacemos con el siguiente comando:

      jest src/__test__/index.test.js

      Para evitar errores tenemos que instalar jest de forma global. En Mac seria:

      sudo npm i -g jest

      Con describe creamos un suite en el cual podemos correr muchos test y mantenerlos mejor organizados.

      index.test.js

      const randomStrings = require("../index"); describe("Test randomString function", () => { test("It should return a string", () => { expect(typeof randomStrings()).toBe("string"); }); test("Check if a videogame does not exits", () => { expect(randomStrings()).not.toMatch(/Halo/); }); });

      Hasta ahora hemos corrido nuestros test despues de cada cambio, esto no tiene por que ser así, jest nos permite correr un comando para quedarse escuchando a todos los cambios sin necesidad de correr un mismo comando con cada iteración.

      package.json

      "scripts": { "test": "jest", "test:watch": "jest --watch" },

      Si queremos saber que tanto hemos probado nuestro projecto podemos correr

      jest --coverage

      Esto nos da un output en consola sobre el estado de nuestros archivos, pero si queremos verlo con más detalle, podemos acceder a un archivo html que se crea en una carpeta coverage en el subdirectorio Icov-report.

        Bernardo Aguayo Ortega

        Bernardo Aguayo Ortega

        student•
        hace 5 años

        gracias!!

        Andres Orlando Navarro Gutierrez

        Andres Orlando Navarro Gutierrez

        student•
        hace 5 años

        Gracias

      Nelo Puchades Bresó

      Nelo Puchades Bresó

      student•
      hace 5 años

      El test en el que comprueba que no existe una ciudad está mal. Lo que comprueba es que la ciudad random que devuelve el método no sea Córdoba que no es lo mismo. Si probamos a poner una ciudad que si está en el array pero el método devuelve otra, el test pasa erróneamente.

        sofia mejia

        sofia mejia

        student•
        hace 5 años

        Manuel, hice la misa prueba y llegué a la misma conclusión que tú. Revisando la documentación encontré que el método correcto para hacer este tipo de test es .toContain.

        Quedaría así:

        const cities = ['Paris', 'CDMX', 'Tokyo', 'Berlín', 'Berlgrado']; test('Comporbar que no existe una ciudad', () => { expect(randomStrings()).not.toContain('CDMX') })

        Entonces el test fallaría

        Iván Darío Sánchez Jiménez

        Iván Darío Sánchez Jiménez

        student•
        hace 4 años

        Realmente lo correcto para evaluar si una ciudad no existe sería que la función retornara un array y utlizariamos not.contain para verificar que no existe esta ciudad, tienes razón que el objetivo del test usando match no es realmente si la ciudad no existe sino es como lo planteas lo que se verifica es que el string retornado no corresponde con la ciudad a evaluar

      Javier Montoya Arroyo

      Javier Montoya Arroyo

      student•
      hace 5 años

      Si nos encontramos trabajando sobre Visual Studio Code disponemos de dos plugins que amplian y mejoran nuestra exp como dev muy utiles:

      • JestRunner Nos habilita la posibilidad de lanzar los test sobre el código.
      • Jest Snippets Nos brinda conjunto de snipptes para mejorar nuestra productividad en la codificación de los test. (Conveniente tras automatizar el flujo de creación de test "manualmente)
        Reinaldo Mendoza

        Reinaldo Mendoza

        student•
        hace 4 años

        Buenisimo, gracias

      Raycris Maldonado

      Raycris Maldonado

      student•
      hace 3 años

      Si no te funciona el comando que utilizó el profesor para hacer el coverage, puedes utilizar este

      npm test -- --coverage
        Diego Mitma Ariza

        Diego Mitma Ariza

        student•
        hace 3 años

        cierto, a mi no me funciono el comando que ejecuto el profe.

      Nicolás García Puerta

      Nicolás García Puerta

      student•
      hace 6 años

      Math.floor no retorna el máximo valor, redondea un número hacia abajo a su entero más cercano

        Manuel Rivera

        Manuel Rivera

        student•
        hace 6 años

        jajajaja si, creo que se equivoco el profe :D

        Reinaldo Mendoza

        Reinaldo Mendoza

        student•
        hace 4 años

        Tuvo un lapsus, no creo que alguien no se halla dado cuenta, pero en un curso como este donde ya creo todos tenemos ciertas bases es solo una anecdota

      Manuel Rivera

      Manuel Rivera

      student•
      hace 6 años

      También para no instalar jest para correrlo dentro de nuestra consola, podemos simplemente crear nuestro script en nuestro package.json y correrlo con npm run

      Captura de pantalla de 2020-02-28 15-58-02.png
      Ramón Ruiz

      Ramón Ruiz

      student•
      hace 5 años

      Si queremos subir un proyecto de github usando jest es necesario y recomendable hacer .gitignore de la carpeta coverage?

        Samuel Miranda Martínez

        Samuel Miranda Martínez

        student•
        hace 5 años

        Sí, es necesario.

        node_modules coverage
      Jorge Eliecer Rangel Jimenez

      Jorge Eliecer Rangel Jimenez

      student•
      hace 6 años

      Comparto esta extension para Vs Code https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

      Funciona instalando jest de manera global

      npm install -g jest
        Oscar Barajas Tavares

        Oscar Barajas Tavares

        Team Platzi•
        hace 6 años

        No la conocía, gracias por tu aporte.

      Emmanuel Rodríguez

      Emmanuel Rodríguez

      student•
      hace 5 años

      Cabe mencionar que --watch funciona con git por el mapeo con su file system. Por lo que tendrán que cubrir con --watchAll.

      --watch - to watch and listening changes, work only with git. —watchAll - to watch and listening changes.

      —coverage - to get a report of all testing and size of coverage.

      Carlos Morán

      Carlos Morán

      student•
      hace 4 años

      Se puede probar también corriendo el comando como

      npm test index.test.js
      Vanessa Pacheco

      Vanessa Pacheco

      student•
      hace 6 años

      A alguno de ustedes le haz dado problemas con el require y el module.exports?

        Jose Daniel Hernandez Quiceno

        Jose Daniel Hernandez Quiceno

        student•
        hace 6 años

        Si te da problemas esto, posiblemente sea algo con Node JS, intenta instarlo nuevamente

        Jose Daniel Hernandez Quiceno

        Jose Daniel Hernandez Quiceno

        student•
        hace 6 años

        Instalarlo*

      Daniel Elías Ángel Barreto

      Daniel Elías Ángel Barreto

      student•
      hace 4 años

      Otras formas de correr el test que quieres que corra

      npm test index.test

      esta es otra const randomStrings = require('../index'); // agregar .only al test que quieres correr y ejecutar npm run test index.test test.only('Should have a string', () => { expect(typeof (randomStrings())).toBe('string'); });

      Jose Enrique Marquez

      Jose Enrique Marquez

      student•
      hace 6 años

      Tambien se puede ejecutar sin instalar globalmente ejecutando los comandos

      yarn jest src/__test__/index.test.js

      or

      npx jest src/__test__/index.test.js
      Javier Gómez

      Javier Gómez

      student•
      hace 6 años
      const cities = ['Ciudad de México', 'Bogotá', 'Lima', 'Buenos Aires']; const randomString = () => { return cities[Math.floor(Math.random() * cities.length)]; }; describe('Probar funcionalidades de randomString', () => { test('Probar la funcionalidad', () => { expect(typeof (randomString())).toBe('string'); }); test('Comprobar que no existe una ciudad', () => { expect(randomString()).not.toMatch(/Cordoba/); }); });
        Gustavo Altamiranda

        Gustavo Altamiranda

        student•
        hace 5 años

        No se porque no me toma el require

      Miguelangel Palma

      Miguelangel Palma

      student•
      hace 6 años

      Para los que le den error con el --watch y jest les recomiende que usen el --watchAll. La solución es utilizar git init dentro del proyecto para inicializar un repositorio, ya que si no tienes tu codigo en un repositorio no te dejara usar el flag --watch. También pueden utilizar --watchAll pero al momento que hagan un cambio volvera a correr todos los test, el --watch solo corre el test que ha cambiado especificamente. Saludos

      Rulo Code

      Rulo Code

      student•
      hace 6 años

      Mira las notas sobre los conceptos básicos de Pruebas en Js, aquí :D

      Sergio Estrella

      Sergio Estrella

      teacher•
      hace 4 años

      Me surgió una pregunta al ver que podemos agrupar una serie de tests dentro de describe. Si uno de los test que está dentro de describe falla, falla solo ese? O el describe en general?

        Miguel Cobas

        Miguel Cobas

        student•
        hace 4 años

        No falla el describe general, solo el test.

      Guido Modarelli

      Guido Modarelli

      student•
      hace 5 años

      También puede correr

      npm test index.test.js

    Escuelas

    • Desarrollo Web
      • Fundamentos del Desarrollo Web Profesional
      • Diseño y Desarrollo Frontend
      • Desarrollo Frontend con JavaScript
      • Desarrollo Frontend con Vue.js
      • Desarrollo Frontend con Angular
      • Desarrollo Frontend con React.js
      • Desarrollo Backend con Node.js
      • Desarrollo Backend con Python
      • Desarrollo Backend con Java
      • Desarrollo Backend con PHP
      • Desarrollo Backend con Ruby
      • Bases de Datos para Web
      • Seguridad Web & API
      • Testing Automatizado y QA para Web
      • Arquitecturas Web Modernas y Escalabilidad
      • DevOps y Cloud para Desarrolladores Web
    • English Academy
      • Inglés Básico A1
      • Inglés Básico A2
      • Inglés Intermedio B1
      • Inglés Intermedio Alto B2
      • Inglés Avanzado C1
      • Inglés para Propósitos Específicos
      • Inglés de Negocios
    • Marketing Digital
      • Fundamentos de Marketing Digital
      • Marketing de Contenidos y Redacción Persuasiva
      • SEO y Posicionamiento Web
      • Social Media Marketing y Community Management
      • Publicidad Digital y Paid Media
      • Analítica Digital y Optimización (CRO)
      • Estrategia de Marketing y Growth
      • Marketing de Marca y Comunicación Estratégica
      • Marketing para E-commerce
      • Marketing B2B
      • Inteligencia Artificial Aplicada al Marketing
      • Automatización del Marketing
      • Marca Personal y Marketing Freelance
      • Ventas y Experiencia del Cliente
      • Creación de Contenido para Redes Sociales
    • Inteligencia Artificial y Data Science
      • Fundamentos de Data Science y AI
      • Análisis y Visualización de Datos
      • Machine Learning y Deep Learning
      • Data Engineer
      • Inteligencia Artificial para la Productividad
      • Desarrollo de Aplicaciones con IA
      • AI Software Engineer
    • Ciberseguridad
      • Fundamentos de Ciberseguridad
      • Hacking Ético y Pentesting (Red Team)
      • Análisis de Malware e Ingeniería Forense
      • Seguridad Defensiva y Cumplimiento (Blue Team)
      • Ciberseguridad Estratégica
    • Liderazgo y Habilidades Blandas
      • Fundamentos de Habilidades Profesionales
      • Liderazgo y Gestión de Equipos
      • Comunicación Avanzada y Oratoria
      • Negociación y Resolución de Conflictos
      • Inteligencia Emocional y Autogestión
      • Productividad y Herramientas Digitales
      • Gestión de Proyectos y Metodologías Ágiles
      • Desarrollo de Carrera y Marca Personal
      • Diversidad, Inclusión y Entorno Laboral Saludable
      • Filosofía y Estrategia para Líderes
    • Diseño de Producto y UX
      • Fundamentos de Diseño UX/UI
      • Investigación de Usuarios (UX Research)
      • Arquitectura de Información y Usabilidad
      • Diseño de Interfaces y Prototipado (UI Design)
      • Sistemas de Diseño y DesignOps
      • Redacción UX (UX Writing)
      • Creatividad e Innovación en Diseño
      • Diseño Accesible e Inclusivo
      • Diseño Asistido por Inteligencia Artificial
      • Gestión de Producto y Liderazgo en Diseño
      • Diseño de Interacciones Emergentes (VUI/VR)
      • Desarrollo Web para Diseñadores
      • Diseño y Prototipado No-Code
    • Contenido Audiovisual
      • Fundamentos de Producción Audiovisual
      • Producción de Video para Plataformas Digitales
      • Producción de Audio y Podcast
      • Fotografía y Diseño Gráfico para Contenido Digital
      • Motion Graphics y Animación
      • Contenido Interactivo y Realidad Aumentada
      • Estrategia, Marketing y Monetización de Contenidos
    • Desarrollo Móvil
      • Fundamentos de Desarrollo Móvil
      • Desarrollo Nativo Android con Kotlin
      • Desarrollo Nativo iOS con Swift
      • Desarrollo Multiplataforma con React Native
      • Desarrollo Multiplataforma con Flutter
      • Arquitectura y Patrones de Diseño Móvil
      • Integración de APIs y Persistencia Móvil
      • Testing y Despliegue en Móvil
      • Diseño UX/UI para Móviles
    • Diseño Gráfico y Arte Digital
      • Fundamentos del Diseño Gráfico y Digital
      • Diseño de Identidad Visual y Branding
      • Ilustración Digital y Arte Conceptual
      • Diseño Editorial y de Empaques
      • Motion Graphics y Animación 3D
      • Diseño Gráfico Asistido por Inteligencia Artificial
      • Creatividad e Innovación en Diseño
    • Programación
      • Fundamentos de Programación e Ingeniería de Software
      • Herramientas de IA para el trabajo
      • Matemáticas para Programación
      • Programación con Python
      • Programación con JavaScript
      • Programación con TypeScript
      • Programación Orientada a Objetos con Java
      • Desarrollo con C# y .NET
      • Programación con PHP
      • Programación con Go y Rust
      • Programación Móvil con Swift y Kotlin
      • Programación con C y C++
      • Administración Básica de Servidores Linux
    • Negocios
      • Fundamentos de Negocios y Emprendimiento
      • Estrategia y Crecimiento Empresarial
      • Finanzas Personales y Corporativas
      • Inversión en Mercados Financieros
      • Ventas, CRM y Experiencia del Cliente
      • Operaciones, Logística y E-commerce
      • Gestión de Proyectos y Metodologías Ágiles
      • Aspectos Legales y Cumplimiento
      • Habilidades Directivas y Crecimiento Profesional
      • Diversidad e Inclusión en el Entorno Laboral
      • Herramientas Digitales y Automatización para Negocios
    • Blockchain y Web3
      • Fundamentos de Blockchain y Web3
      • Desarrollo de Smart Contracts y dApps
      • Finanzas Descentralizadas (DeFi)
      • NFTs y Economía de Creadores
      • Seguridad Blockchain
      • Ecosistemas Blockchain Alternativos (No-EVM)
      • Producto, Marketing y Legal en Web3
    • Recursos Humanos
      • Fundamentos y Cultura Organizacional en RRHH
      • Atracción y Selección de Talento
      • Cultura y Employee Experience
      • Gestión y Desarrollo de Talento
      • Desarrollo y Evaluación de Liderazgo
      • Diversidad, Equidad e Inclusión
      • AI y Automatización en Recursos Humanos
      • Tecnología y Automatización en RRHH
    • Finanzas e Inversiones
      • Fundamentos de Finanzas Personales y Corporativas
      • Análisis y Valoración Financiera
      • Inversión y Mercados de Capitales
      • Finanzas Descentralizadas (DeFi) y Criptoactivos
      • Finanzas y Estrategia para Startups
      • Inteligencia Artificial Aplicada a Finanzas
      • Domina Excel
      • Financial Analyst
      • Conseguir trabajo en Finanzas e Inversiones
    • Startups
      • Fundamentos y Validación de Ideas
      • Estrategia de Negocio y Product-Market Fit
      • Desarrollo de Producto y Operaciones Lean
      • Finanzas, Legal y Fundraising
      • Marketing, Ventas y Growth para Startups
      • Cultura, Talento y Liderazgo
      • Finanzas y Operaciones en Ecommerce
      • Startups Web3 y Blockchain
      • Startups con Impacto Social
      • Expansión y Ecosistema Startup
    • Cloud Computing y DevOps
      • Fundamentos de Cloud y DevOps
      • Administración de Servidores Linux
      • Contenerización y Orquestación
      • Infraestructura como Código (IaC) y CI/CD
      • Amazon Web Services
      • Microsoft Azure
      • Serverless y Observabilidad
      • Certificaciones Cloud (Preparación)
      • Plataforma Cloud GCP

    Platzi y comunidad

    • Platzi Business
    • Live Classes
    • Lanzamientos
    • Executive Program
    • Trabaja con nosotros
    • Podcast

    Recursos

    • Manual de Marca

    Soporte

    • Preguntas Frecuentes
    • Contáctanos

    Legal

    • Términos y Condiciones
    • Privacidad
    • Tyc promociones
    Reconocimientos
    Reconocimientos
    Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
    Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
    Logo reconocimientoPrimera Startup EdTech · 2018
    Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
    Logo reconocimientoCEO Mejor Emprendedor del año · 2024
    De LATAM conpara el mundo
    YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads