Una caja de arena: tu primera prueba en Vue.js

Clase 5 de 14 • Curso de Unit Testing en Vue.js 3

Irving Caamal

student•

Les dejo esta lectura/articulo donde se habla más a fondo de las convenciones de nombres en los tests, que como se dijo en esta clase, es una parte crucial.

unit-test-naming-conventions

Aquí otro recurso en español e incluso siento que es más completo Convención de Nombres para Pruebas Unitarias — Unit Test

Eddy Arellanes

student•

Buen aporte!

Uriel Solis Salinas

student•

Explicación del archivo hello_word.spec.js: .

import { shallowMount } from '@vue/test-utils' /* shallowMount es una función que nos permite montar un componente de Vue.js en un entorno de prueba. */

import HelloWorld from '@/components/HelloWorld.vue' /* Importamos el componente HelloWorld. */

/* describe es una función que nos permite agrupar pruebas relacionadas. */
describe('HelloWorld.vue', () => {

  /* it es una función que nos permite definir una prueba. */
  it('renders hello world component', () => {
    const wrapper = shallowMount(HelloWorld) /* Montamos el componente HelloWorld en un entorno de prueba. */

    const component = wrapper.find('.hello') /* Buscamos el elemento con la clase hello. */

    expect(component.classes()).toContain('hello') /* Comprobamos que el elemento contiene la clase hello. */
    
    /* 
	    component.classes() devuelve un array con las clases del elemento.
    	toContain es una función de Jest que nos permite comprobar si un array contiene un elemento. 
    */
  })
})

Ameth Ordoñez Erazo

student•

Hubiese estado mejor si explicara cómo funciona el unit testing, muchos no saben de donde viene el describe() o que son los it(). ¿Hay un curso solamente dedicado a esto que se debió tomar antes? ¿O de alguna forma se asume que ya se deberian saber estos conceptos?

María Camila Lenis Restrepo

teacher•

Hola Ameth,

Sip, en este curso asumimos una base de testing con Javascript para enfocarnos realmente en las particularidades de Vue. Te recomiendo el curso de Intro al testing el Javascript para profundizar: https://platzi.com/cursos/javascript-testing/

Guillermo Castaño Vèlez

student•

más bien creo que falto una introducción más completa a vue-test-utils

José

student•

Que fuente de texto usas?

María Camila Lenis Restrepo

teacher•

Te refieres al tema de VS Code? o al de la app?

José

student•

A la fuente que aparece en VS Code, como Cascadia, Fira Code, etc.

Samuel Espinoza Figueroa

student•

Parsing error: No Babel config file detected for /home/samuel/Documentos/curso-vue-unit-testing/hello-world/tests/unit/hello_world.spec.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.eslint si alguien le sabe a este error de eslint, porfa denme la solucion, ya he intentado de todo

María Camila Lenis Restrepo

teacher•

Puedes revisar si tienes este archivo: https://github.com/platzi/curso-vue-unit-testing/blob/base/vue-testing-projects/hello-world/babel.config.js

Una caja de arena: tu primera prueba en Vue.js

Introducción

¿Por qué hacer testing en Vue.js?

Tipos de testing en Vue.js

Proyecto del curso: QR Generator App

Montando un componente

¿Qué se debe testear en Vue.js? Vue App y Vue Test

Una caja de arena: tu primera prueba en Vue.js

Probando dependencias de Vue

Shallow mount vs. mount

Wrapper: probando elementos y estados

Acciones y mocks

Prueba de eventos: ejecutando acciones en el componente

Mocks en Vue.js: interceptando funciones

Prueba de eventos emitidos entre múltiples componentes

Testing de UI: probando estados de la interfaz

Un paso adicional

Vue Test Coverage

Cierre

¿Quieres más cursos de testing en Vue?