Saltar al contenido

tutorial vue pruebas unitarias utilizando Jest y vue-test-utilsJan, 24thIn este tutorial, vamos a aprender acerca de cómo vue.js de prueba de unidad …

marzo 13, 2020

 

En este tutorial, vamos a aprender acerca de cómo unidad de prueba vue.js componentes utilizando jestand vue-prueba-utils.

¿Cuál es la broma?

La broma es un marco de pruebas de unidad de JavaScript creado por facebook que incluye un montón de pruebas instantáneas featureslike, cobertura de código, etc.

Vue-test-utils

La biblioteca vue-prueba-utils nos proporciona métodos de ayuda mediante el uso que puede montar e interactuar con los componentes Vue fácilmente.

Introducción

En primer lugar, vamos a crear un nuevo proyecto vue Vue mediante el uso de la CLI.

Abrir el siguiente comando en el terminal y correr.

vue create vue-testing

ya se puede ver dos opciones seleccionar seleccionar manualmente las características y pulsa enter.

Vue CLI v3.0.0
? Please pick a preset:
default (babel, eslint)
❯ Manually select features

Ahora es necesario seleccionar la opción de la unidad de pruebas mediante el uso de la tecla Espacio.

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
❯◯ Unit Testing
◯ E2E Testing

Ahora elegir ESLint con la prevención de errores única opción y pulsa enter.

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier

Ahora la opción de elegir la broma y pulsa enter.

Vue CLI v3.0.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter, Unit
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Pick a unit testing solution:
Mocha + Chai
❯ Jest

Ahora se le pedirá dónde colocar configuraciones eligen package.json.

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
In dedicated config files
❯ In package.json

final tipo de pregunta N y pulsa enter y se inicia la CLI vue creación de nuestro proyecto con la broma y vue-prueba-utils.

Ejecutar el siguiente comando en el terminal para cambiar el directorio de trabajo actual.

cd vue-testing

Ahora abra su proyecto vue-prueba en el editor de código favorito, verá una carpeta de pruebas que se genera por la vue CLI eliminar esta carpeta.

eliminar todo desde el archivo App.vue y añadir el siguiente código. componente