CursosEmpresasBlogLiveConfPrecios

Preparación del entorno con Jest

Clase 3 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

    Viendo ahora
  • 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

    12:13 min

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
    • Alan David R.L.

      Alan David R.L.

      student•
      hace 6 años

      Preparación del entorno con Jest

      Escribimos en la terminal el siguiente comando:

      npm install -D jest

      -D es lo mismo que --save-dev.

      Ambos flags guardan la dependencia como una de desarrollo.

      Trabajando con los basicos de Jest

      Vamos a estar trabajando con la función "test", esta recibe dos parametros:

      • Un string que describe lo que va a pasar.
      • Función anonima en la cual viene lo que se va a probar.

      La función expect

      Contiene dos parametros:

      • Valor de entrada.
      • Con lo que el primer parametro va a ser comparado.
      const text = "I´m Ironman"; test("It should has the word Ironman", () => { expect(text).toMatch(/Ironman/); });

      Código listo para hacer test

      Ahora para hacer test de nuestro código tenemos que correr el comando test, para eso se tiene que armar en nuestro package.json

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

      Output

      PASS src/**test**/global.test.js ✓ It should has the word Ironman (4ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 1.663s Ran all test suites.
        Miguel Angel Escurra

        Miguel Angel Escurra

        student•
        hace 6 años

        Excelent!!!

        Carlos Eduardo Diaz Polanco

        Carlos Eduardo Diaz Polanco

        student•
        hace 5 años

        Muy bien!!!

      Edwin García

      Edwin García

      student•
      hace 6 años

      En mi editor muestra unos errores al no definir las funciones test y expect Para solucionarlo instalé @types/jest

      npm i -D @types/jest
        Bernardo Aguayo Ortega

        Bernardo Aguayo Ortega

        student•
        hace 5 años

        gracias bro!

        Jair Israel Avilés Eusebio

        Jair Israel Avilés Eusebio

        student•
        hace 5 años

        Una solucion tal vez no tan limpia es importar en tus archivos de pruebas los metodos desde el paquete de jest.

        import {describe, expect, test} from '@jest/globals'

      Miguel Prada

      Miguel Prada

      student•
      hace 5 años

      Un tip que encontré! Jest contiene una funcionalidad para observar cambios en los archivos y ejecutar los tests automaticamente. Al comando jest se le puede agregar el flag --watch para observar los cambios. Entonces en el package.json si agregamos:

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

      Podemos correr npm run test-watch y la terminal estará atenta a cambios en los archivos para ejecutar de nuevo las pruebas :)

        Andrés Felipe Eslava Zuluaga

        Andrés Felipe Eslava Zuluaga

        student•
        hace 5 años

        Genial!

        Humberto Asca

        Humberto Asca

        student•
        hace 3 años

        Excelente, solo ejecuto una sola vez npm run test-watch y después cada vez que actualizo/grabo un archivo de test, el test se ejecuta en forma automática ahorrando tiempo para no ejecutar npm run test cada vez.

        Tiene algo similar a nodemon que nos ahorra tiempo.

      Luis Fernando Farji

      Luis Fernando Farji

      student•
      hace 6 años
      mkdir jsbase cd jsbase git init npm init
        Miguel Angel Escurra

        Miguel Angel Escurra

        student•
        hace 6 años

        Muchas gracias!

        John Parra

        John Parra

        student•
        hace 6 años

        Muy utiles los comandos para iniciar de 0 las pruebas unitarias, importante tener en cuenta la creación de cada archivo global.test.js asi como la creación de la carpeta donde va src/__test__

      Nelo Puchades Bresó

      Nelo Puchades Bresó

      student•
      hace 5 años

      Creo que el texto que describe el test está mal redactado, ya que lo que comprueba no es que deba contener un texto, si no que el texto que se le pasa debe contener la palabra 'Mundo'. Es distinto. Cuidado no se confundan.

        Jhon Fernando Ríos Galíndez

        Jhon Fernando Ríos Galíndez

        student•
        hace 3 años

        El texto se da como referencia para entender en palabras lo que se quiere con el test, pero lo que realmente se testea es expect vs toMatch. Basicamente te refieres a eso.

      Rafael Soriano Ramírez

      Rafael Soriano Ramírez

      student•
      hace 5 años

      Por primera vez en mi vida ejecutando un 'npm test', se siente raro

      Cristian Blandón

      Cristian Blandón

      student•
      hace 5 años

      Óscar cambia de tema tanto en VSCode como en la terminal en cada curso :joy:

      July Andrea Suarez Suarez

      July Andrea Suarez Suarez

      student•
      hace 5 años

      Buenos dias tambien se podria hacer con typeScript?

        July Andrea Suarez Suarez

        July Andrea Suarez Suarez

        student•
        hace 5 años

        Muchas gracias voy a probar con la informacion que me pasaste

        Cristian Blandón

        Cristian Blandón

        student•
        hace 5 años

        ¡Por supuesto!

      IRIDIAN GUADALUPE CARRERA MONDRAGÓN

      IRIDIAN GUADALUPE CARRERA MONDRAGÓN

      student•
      hace 5 años

      Es un estandar crear la siguiente carpeta, pues como desarrolladores la utilizamos para poner nuestras pruebas e identificarla más rápido y saber que esa no es una carpeta random, sino que es una carpeta dónde van a vivir nuestras pruebas:

      __test__
        Andrés Felipe Eslava Zuluaga

        Andrés Felipe Eslava Zuluaga

        student•
        hace 5 años

        No sabía ésto! Qué buen apunte

      Santiago Marulanda Molina

      Santiago Marulanda Molina

      student•
      hace 6 años

      Abreviado: npm i -D jest

      Carlos Jose Flores Henriquez

      Carlos Jose Flores Henriquez

      student•
      hace 5 años

      A los que les aparece "license": "ISC" a la hora de configurar el package.json. DEJENLO ASÍ.

      Diego Monroy

      Diego Monroy

      student•
      hace 5 años

      Tengo este error simplemente al correr npm test

      SyntaxError: Unexpected token { at createScript (vm.js:80:10) at Object.runInThisContext (vm.js:139:10) at Module._compile (module.js:616:28) at Object.Module._extensions..js (module.js:663:10) at Module.load (module.js:565:32) at tryModuleLoad (module.js:505:12) at Function.Module._load (module.js:497:3) at Module.require (module.js:596:17) at require (internal/module.js:11:18)

      Alguna ayuda? no hice nada más que los pasos del video jeje

        Jair Israel Avilés Eusebio

        Jair Israel Avilés Eusebio

        student•
        hace 5 años

        El error es claro SyntaxError. Verifica que no tengas un typo en la definicion de tu prueba.

      Carlos Rosado

      Carlos Rosado

      student•
      hace 5 años

      un comando mas corto puede ser

      npm i jest -D

      o si es de produccion

      npm i jest
        Juan David González Rodríguez

        Juan David González Rodríguez

        student•
        hace 4 años

        Aunque no seria bueno instalarlo como producción , ya que los test solo lo usamos en desarrollo , Y seria innecesario ponerlo en producción :D

      Jorge De Jesus Tejeda Bello

      Jorge De Jesus Tejeda Bello

      student•
      hace 4 años

      Para agregar intellisense de jest, en la raiz del proyecto creamos un archivo llamado jsconfig.json y dentro agregamos el siguiente objeto

      { “typeAcquisition”: { “include”: [ “jest“ ] } }

      luego instalamos la libreria

      npm i @types/jest --save-dev

      por ultimo volver a cargar el IDE que estes utilizando, de ser visual VSCO presiona CMD+SHIFT+P (para Mac) CRTL+SHIFT+P (para window)

      y escribimos reload window.

      Jean Nuñez

      Jean Nuñez

      student•
      hace 6 años

      npm install jest --save-dev

      Ruth Lucy Campos Huamantica

      Ruth Lucy Campos Huamantica

      student•
      hace 5 años

      Para correr nuestro test, tener en cuenta esta línea en el archivo package.json:

      "scripts": { "test": "jest" },
      Beicker Jesus Zambrano Escalona

      Beicker Jesus Zambrano Escalona

      student•
      hace 5 años

      Wow pero qué maravilla de profesor jaja Me está encantando este curso. Se ve super fácil el use de Jest (hasta ahora jeje)

      Bernardo Aguayo Ortega

      Bernardo Aguayo Ortega

      student•
      hace 5 años

      regresando para repasar conocimientos, no recordaba lo bueno que es este curso <3

      Cristhian Medina

      Cristhian Medina

      student•
      hace 4 años

      Si alguno utiliza "yarn" como instalador de paquetes, el comando para instalar jest es:

      $ yarn add --dev jest
      Mariano Villarreal

      Mariano Villarreal

      student•
      hace 6 años

      npm install -D jest

    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