Realice Unit Testing a su aplicación Vue 3 con Vitest, Vite y Vue Testing Utils.

Por:

Denisse Abreu
nov 6, 2022 7pm ET

Eng/Spa 10-min

# Ejecute su primer Unit Test # ¿Cómo probar un componente de formulario? # ¿Cómo probar el Vue Router? # ¿Cómo probar a Pinia?

Hola 👋🏼, hablemos de Testing. El Unit Testing es uno de esos temas que, por alguna razón, queda fuera de la mayoría de los tutoriales. Las pruebas unitarias (Unit Testing) son vitales para el desempeño y operación de su aplicación; asegurará que su aplicación funcione sin problemas durante su vida útil. Recuerda, a medida que pasa el tiempo, actualizamos y cambiamos las funciones de nuestra aplicación, esto puede tener cambios importantes que solo se detectarán mediante la ejecución de pruebas. En esta primera parte del tutorial de Unit Testing, trabajaremos con Vue 3, Vitest y Vue Testing Utils. Instalaremos un proyecto Vue 3 y crearemos un componente de formulario simple.
¡Empecemos!

Primero, instale un proyecto Vue 3. Si no sabe cómo instalar Vue 3, siga la guía de instalación de Vue 3. Abra su terminal y ejecute: npm init vue@latest.

Terminal

  Project name: testing-tutorial
  Add TypeScript? Yes
  Add JSX Support? No 
  Add Vue Router for Single Page Application development? Yes
  Add Pinia for state management? Yes
  Add Vitest for Unit testing? Yes

Después de la instalación del proyecto, vaya a la raíz del testing tutorial, instale las librerías e inicie el proyecto en modo de desarrollo.

Terminal

  cd testing-tutorial
  npm install
  npm run dev

Ejecute su primer Unit Test.

Abra el terminal e inicie su primer Unit test. Puede encontrar el comando para ejecutar esta prueba en la parte del script del package.json; Consiste en una prueba sencilla para verificar si HelloWorld.vue monta el componente y pasa los props. La prueba debe pasar.

Terminal

  npm run test:unit

Pruebe los componentes del 'front-page' creando TheWelcome.spec.ts adentro de la carpeta __tests__. En la siguiente prueba, verifique que el componente contenga un SVG y un 'anchor tag'; Además, verifique que este haga clic.

src/components/__tests__/TheWelcome.spec.ts

¿Cómo probar un componente de formulario?

Comenzaremos la lección probando un componente de formulario simple (form component). Vaya a la carpeta components, y cree un formulario con un elemento de entrada (input) y un botón. Importe este componente en el archivo HelloWorld.vue.

src/components/TheForm.vue

Ve a HelloWorld.spec.ts y agrega más Casos de prueba.

src/components/__tests__/HelloWorld.spec.ts

¿Cómo probar el Vue Router?

Antes de probar el Vue Router, haremos algunas refactorizaciones. Vaya a la carpeta components y cree un archivo Header.vue. Mueva la sección de header de App.vue adentro del recién creado expediente. Su App.vue debería verse como el siguiente código.

src/App.vue

src/components/Header.vue

Ahora que tenemos una buena separación de componentes, inicie la prueba del Router. En la carpeta __tests__, cree un Header.spec.ts y llénelo con nuevos casos de prueba. Además, agregué type="button" y id="link" para mostrarte cómo obtener estos elementos.

src/components/__tests__/Header.spec.ts

¿Cómo probar a Pinia?

En esta parte del tutorial, usaremos Pinia, el administrador del 'state' de aplicaciones Vue. Simularemos algunos valores, los enviaremos al 'store' y verificaremos que los valores existan en este. Pero primero, probemos el 'counter' que Pinia instaló.

Vaya a la carpeta stores y cree __tests__. Dentro de esa carpeta crea, counter.spec.ts, y rellénalo con el siguiente código. ¡Recuerda iniciar tu prueba!

src/stores/__tests__/counter.spec.ts

src/stores/counter.ts

En la última parte de este tutorial, complicaremos el 'store' un poco y crearemos un 'store' de usuarios, donde insertaremos algunos valores y comprobaremos que estos se encuentren en el 'store'. Vaya a la carpeta stores y cree user.ts.

src/stores/user.ts

Cree user.spec.ts en la carpeta de __tests__ e inicie su prueba.

src/stores/user.spec.ts