Vue Test Coverage

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

Uriel Solis Salinas

student•

Vue Test Coverage

. Vue Test Coverage (cobertura de pruebas en Vue) es una métrica utilizada para medir la cantidad de código de Vue.js que es cubierta por pruebas automatizadas. . En el contexto de Vue.js, la cobertura de pruebas se puede medir utilizando herramientas como Jest o Mocha, que son frameworks de pruebas populares para aplicaciones web. Estas herramientas nos permiten generar un informe de cobertura de pruebas que nos muestra la cantidad de código que es cubierta por las pruebas automatizadas. . El informe de cobertura de pruebas se muestra en forma de porcentaje, lo que nos indica cuánto del código de nuestra aplicación está siendo evaluado por las pruebas automatizadas. Un alto porcentaje de cobertura de pruebas indica que la mayoría del código está siendo evaluado y que hay menos posibilidades de que se produzcan errores o problemas en el código. . Para configurarlo, se puede agregar dentro del archivo package.json o si tienes un archivo aparte sería jest.config.js, si se agregaría lo siguiente:

// Para jest.config.js 
module.exports = {
  preset: '@vue/cli-plugin-unit-jest',
  collectCoverage: true,
  collectCoverageFrom: ['src/**/*.{js,vue}', '!**/node_modules/**']
}

// Para package.json
"jest": {
    "preset": "@vue/cli-plugin-unit-jest",
    "collectCoverage": true,
    "collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"]
}

Vue Test Coverage

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?