Una caja de arena: tu primera prueba en Vue.js
Contenido del curso
Montando un componente
Acciones y mocks
Un paso adicional
Cierre
Una caja de arena: tu primera prueba en Vue.js
Contenido del curso
Una caja de arena: tu primera prueba en Vue.js
Irving Caamal
Estudiante
Eddy Arellanes
Estudiante
Uriel Solis Salinas
Estudiante
Ameth Ordoñez Erazo
Estudiante
María Camila Lenis Restrepo
Profesor
Guillermo Castaño Vèlez
Estudiante
José
EstudianteMaría Camila Lenis Restrepo
ProfesorJosé
Estudiante
Samuel Espinoza Figueroa
EstudianteMaría Camila Lenis Restrepo
ProfesorLes 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
Buen aporte!
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. */ }) })
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?
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/
más bien creo que falto una introducción más completa a vue-test-utils
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.
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