CursosEmpresasBlogLiveConfPrecios

Preparación para pruebas de proyectos Vue con NPM y Vue Test Utils

Clase 4 de 12 • Curso de Testing con Vue.js 2

Contenido del curso

Introducción

  • 1
    Pruebas en Proyectos de Software con Vue y Automatización

    Pruebas en Proyectos de Software con Vue y Automatización

    01:03 min
  • 2
    Pruebas Unitarias e Integración en Desarrollo de Software

    Pruebas Unitarias e Integración en Desarrollo de Software

    03:29 min
  • 3
    Evolución de Pruebas de Software: De Turing a la Calidad Actual

    Evolución de Pruebas de Software: De Turing a la Calidad Actual

    02:16 min
  • 4
    Preparación para pruebas de proyectos Vue con NPM y Vue Test Utils

    Preparación para pruebas de proyectos Vue con NPM y Vue Test Utils

    Viendo ahora

Entendiendo las pruebas

  • 5
    Pruebas de Entradas y Salidas en Componentes Vue

    Pruebas de Entradas y Salidas en Componentes Vue

    01:44 min

Herramientas de desarrollo

  • 6
    Pruebas unitarias en Vue con Test Utils: Introducción práctica

    Pruebas unitarias en Vue con Test Utils: Introducción práctica

    02:51 min
  • 7
    Pruebas unitarias con Jest: detección de anomalías y defectos

    Pruebas unitarias con Jest: detección de anomalías y defectos

    03:55 min

Desarrollo de pruebas

  • 8
    Aplicar TDD en Vue: Desarrollo y Pruebas de Funcionalidades

    Aplicar TDD en Vue: Desarrollo y Pruebas de Funcionalidades

    02:15 min
  • 9
    Pruebas de Software con Mocking en Aplicaciones de JavaScript

    Pruebas de Software con Mocking en Aplicaciones de JavaScript

    03:05 min
  • 10
    Pruebas Unitarias con Jest y Vue Test Utils

    Pruebas Unitarias con Jest y Vue Test Utils

    04:42 min
  • 11
    Pruebas Unitarias y Asíncronas en Vue con $nextTick

    Pruebas Unitarias y Asíncronas en Vue con $nextTick

    03:09 min

Tips y buenas prácticas

  • 12
    Pruebas Unitarias y Mocking en Vue con Jest

    Pruebas Unitarias y Mocking en Vue con Jest

    02:38 min
Tomar examen

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

      ¿Qué necesito para probar mi proyecto de Vue?

      Para poder empezar con el curso, es necesario contar con los siguientes requisitos:

      • Tener NPM instalado (v5 en adelante)

      • Contar con Vue instalado (v4 en adelante)

      • Contar con Vue Test Utils instalado

      Así de sencillo, solamente debemos contar con esas 2 cosas, en caso de no tenerlas lo único que debemos hacer es:

      Para NPM

      1. Entramos a la página de Node

      2. Descargamos la versión recomendada.

      30.png

      En mi caso es la 12.16.1

      1. Seguimos los pasos del instalador
      29.png
      1. Comprobamos que se haya instalado node, con este comando en nuestra línea de comandos.

      node -v

      28.png

      Debe de salirnos la versión que descargamos

      1. Hacemos el paso anterior para NPM también

      npm -v

      27.png

      Para VUE

      1. Escribimos en nuestra línea de comandos el siguiente comando

      npm install -g @vue/cli

      1. Después que termine de instalarse, escribimos:

      vue --version

      26.png

      Para Vue Test Utils

      Al contar con los prerequisitos, podemos hacer pleno uso de las herramientas creadas para Vue, como lo es Vue Test Utils.

      Antes de instalar Vue Test Utils, necesitamos un proyecto de Vue, el proyecto con el que vamos a estar trabajando es el siguiente

      1. Clonamos el repositorio en la ubicación que queramos

      2. Después de tener el proyecto clonado nos posicionamos en la carpeta donde está el package.json

      1

      (En mi caso es esa la ruta, debe ser la raíz donde están todos tus archivos)

      y ponemos el siguiente comando en la línea de comandos

      vue add @vue/unit-jest

      25.png

      Debe de salirnos algo así al final de la instalación


      **¡¡Listo !!, ya estamos preparados para empezar a trabajar en nuestras pruebas.

      Cuéntame en los comentarios si tuviste algún problema y si te tomo más de 15 min, el preparar todo lo que necesitabas para empezar a codear pruebas como todo pro.

      Comentarios

        Carlos Eduardo Gomez García

        Carlos Eduardo Gomez García

        teacher•
        hace 5 años

        Todo perfecto, aunque dos cosas:

        1.- En el post dice que necesitamos: Contar con Vue instalado (v4 en adelante)

        Realmente no es Vue lo que tenemos que tener instalado (Porque Vue 4 no existe... aún, apenas estamos en Vue 3) Realmente lo que necesitamos es el Vue CLI instalado, el cuál ya está en su versión 4.5.x si no me equivoco, es importante dejar claro que Vue y Vue CLI son dos cosas diferentes.

        2.- También faltó indicar que después de clonar el repositorio tenemos que instalar las dependencias del proeycto, esto lo hacemos con:

        npm install

        Depués podemos añadir Vue Test Utils al proyecto :D!

        Manuel Ojeda

        Manuel Ojeda

        student•
        hace 6 años

        Solo para aclarar, la versión de Vue que especifican se refiere al CLI, no a la versión de Vue en sí. A la fecha que está leyendo esto, la versión actual es la 2.6.11 (y la versión 3 se encuentra en beta)

        El Vue CLI es el que se encuentra en v4.

        WindowsTerminal_bETeH0wwJ0.png
          Usuario anónimo

          Usuario anónimo

          user•
          hace 6 años

          Excelente aclaración, justo vi en mi consola con vue --version o vue -V: 2.9.1

          De momento no he encontrado el comando para ver la versión del CLI que es !== a la versión de Vue como tal.

        Jesús Mohali

        Jesús Mohali

        student•
        hace 5 años

        Yo solo necesitaba el Vue Unit Test y listo, ready

        Erick Tucto

        Erick Tucto

        student•
        hace 4 años

        como puede incluirse vue test utils en un proyecto que no fue creado con vue cli ? por ejemplo en mi trabajo existen varios proyectos hechos con laravel y en el frontend tiene a Vue pero este no fue incluido con Vue cli

        Erick Tucto

        Erick Tucto

        student•
        hace 4 años

        vue test utils usa algun framework o libreria como jest, mocha o jasmine ? o es vue test utils un framework aparte que no depende de estos framework o librerias ?

        Diego Reyes

        Diego Reyes

        student•
        hace 4 años

        JAJAJA de hecho sí, por alguna razón se me fueron 40 minutos y cuando me iba a rendir me di cuent que esta descargando

        <vue add @vue/unit-test>

        Cuando en realidad es

        <vue add @vue/unit-jest>

        lo primero no existe JAJAJA

        Cesar More Sanchez

        Cesar More Sanchez

        student•
        hace 5 años

        Todo perfecto

        Ed RM

        Ed RM

        student•
        hace 5 años

        Si aún no has podido instalar unit-jest con vue puedes intentar instalarlo con npm...

        #instalacion unsando vue $ vue add unit-jest
        #instalacion usando npm $ npm install --save-dev @vue/test-utils
        Andres Evaristo Ruiz Gonzalez

        Andres Evaristo Ruiz Gonzalez

        student•
        hace 5 años

        Sin problemas

        Luis Miguel Mejia Martinez

        Luis Miguel Mejia Martinez

        student•
        hace 5 años

        En mi caso, actualice node y la vue-cli. Luego instalé Vue Test Utils en un proyecto que tengo hecho en Vue

        Jose Daniel Barría Reyes

        Jose Daniel Barría Reyes

        student•
        hace 6 años

        ya instale todo, perfecto!

        Juan David Murillo Giraldo

        Juan David Murillo Giraldo

        student•
        hace 6 años

        Listo el proyecto con las herramientas instaladas, a darle!

        Tony Manuel Ojeda Vela

        Tony Manuel Ojeda Vela

        student•
        hace 5 años

        Alguien con este problema? uso ubuntu 20.10, npm 6.4.8

        Screenshot from 2020-11-19 13-58-39.png

          Ed RM

          Ed RM

          student•
          hace 5 años

          Intenta instalar en la raiz de tu directorio

          ~/ npm install -g @vue/cli

          no lo hagas sobre el directorio de

          ~/Documents/vuedex/
          Sebastián Buitrago

          Sebastián Buitrago

          student•
          hace 5 años

          Agrega sudo para poder hacer instalaciones globales, las instalaciones globales se reconocen cuando se usa esto al momento de instalar

          -g o --global