Vue 3 Unit Testing con Vitest y Vue Testing Utils.

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

Denisse Avatar

Por:

Denisse Abreu
nov 6, 2022 7pm ET

Eng/Spa 10-min

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