Cursos Empresas Blog Live Conf Eventos Precios

0:0016:26

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

Clase 5 de 14

Clase 5 / 14

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. 
    */
  })
})

Comentarios (5)5 comentarios

Irving Caamal

Hace 4 años

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

Buen aporte!

Uriel Solis Salinas

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

Ameth Ordoñez Erazo

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

Profesor

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

Hace 3 años

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

José

Que fuente de texto usas?

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

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

Samuel Espinoza Figueroa

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

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

Progreso del curso

Introducción

Montando un componente

Acciones y mocks

Un paso adicional

Cierre