Escriba pruebas de unidad Vue increíblemente rápidas con Tape y Vue Test Utils

Tape and Vue: una combinación hecha en el cielo

La cinta es el marco más rápido para pruebas unitarias de componentes Vue.

En este artículo, veremos cómo escribir pruebas unitarias de Vue con Tape y Vue Test Utils.

Este tutorial es para usuarios familiarizados con las pruebas unitarias. Si es nuevo en las pruebas unitarias, consulte los componentes Vue de prueba unitaria para principiantes.

¿Qué es la cinta?

La cinta es un marco de prueba de unidad básica que genera el informe de prueba en formato TAP (Test Anything Protocol).

Tiene una API simple para afirmar que sus componentes JavaScript y Vue se comportan correctamente.

¿Por qué cinta?

Hace un par de semanas realicé algunas pruebas de rendimiento en diferentes marcos de prueba. Quería averiguar qué marco era el más rápido para probar Vue SFC (Single File Components).

Agregué Tape por completo, y me sorprendió descubrir que era el framework de rendimiento más rápido.

Para ejecutar pruebas en cinta, necesitamos hacer alguna configuración. Vamos a sumergirnos.

Bootstrapping el proyecto

He hecho un proyecto inicial simple para empezar. Git clone el proyecto en un directorio:

git clone https://github.com/eddyerburgh/jest-vue-starter.git

cd e instale las dependencias:

cd jest-vue-starter && npm install

Ejecute el servidor de desarrollo como npm run dev para ver la aplicación.

Es bastante simple El punto principal de este tutorial es ver cómo configurar Tape y Vue, no escribir pruebas complejas.

Configuración de utilidades de prueba de cinta y Vue

Lo primero que debe hacer es instalar Tape y Vue Test Utils:

npm install --save-dev tape @ vue / test-utils

Vue Test Utils está en beta, por lo que debemos solicitar la versión explícitamente

Vue Test Utils necesita un entorno de navegador para ejecutarse. Esto no significa que debamos ejecutar las pruebas en un navegador (¡gracias!).

Podemos usar jsdom para configurar un entorno de navegador en Node. Agrega variables globales como documento y ventana al nodo.

jsdom es un poco difícil de configurar. Afortunadamente, un desarrollador de nodos emprendedor creó una biblioteca de contenedor llamada browser-env.

npm install --save-dev browser-env

Necesitamos ejecutar browser-env antes de las pruebas. La cinta nos permite definir archivos para ejecutar antes de las pruebas, lo haremos en un segundo.

Los SFC de Vue deben compilarse antes de probarlos. Podemos usar require-hooks para ejecutar WebPack en archivos cuando se requieren en Node. Es una configuración simple.

Primero, instale require-extension-hooks y sus variantes:

npm install --save-dev require-extension-hooks require-extension-hooks-babel require-extension-hooks-vue

Hagamos el archivo de configuración del que hablé anteriormente. Cree un directorio de prueba y agregue un archivo setup.js. La ruta final será test / setup.js.

Ya casi llegamos. Cosas locas.

Escribamos una prueba de humo en cinta. Cree un nuevo archivo llamado List.spec.js en el directorio de prueba. Prueba de ruta completa / List.spec.js. Copie la prueba a continuación en el archivo:

¿Que esta pasando ahí? Definimos una prueba y obtenemos un objeto t en la devolución de llamada. El objeto t contiene métodos de aserción. También tiene un método de plan. Necesitamos decirle a Tape cuántas pruebas debe esperar.

Ahora necesitamos un script para ejecutar las pruebas. Abra el package.json y agregue este script:

"unit": "cinta ./test/specs/*.spec.js -r ./test/setup.js"

Esto le dice a la cinta que ejecute todos los archivos .spec en test / specs. El -r le dice a Tape que requiera o ejecute test / setup antes de ejecutar nuestras pruebas.

Ejecute las pruebas unitarias:

unidad de ejecución npm

Sí, tenemos una prueba de aprobación. Pero hoo boy, esa es una salida de prueba fea

¿Recuerdas que mencioné TAP anteriormente? Este es TAP en su gloria desnuda. Bastante feo, ¿verdad? No te preocupes, podemos embellecerlo.

Instalar tap-spec:

npm install --save-dev tap-spec

Podemos canalizar nuestra salida TAP desde Tape. Edite el script de la unidad para canalizar la salida a tap-spec:

"unit": "cinta ./test/specs/*.spec.js -r ./test/setup.js | tap-spec"

Y vuelva a ejecutar las pruebas:

unidad de ejecución npm

Mucho mejor

Escritura de pruebas con cintas y Vue Test Utils

Escribamos algunas pruebas entonces. Como estamos utilizando Vue Test Utils, las pruebas son bastante legibles.

En List.spec.js, vamos a escribir una prueba que pase una matriz de elementos a List. Utilizaremos el método superficial de Vue Test Utils para montar el componente de manera superficial. shallow devuelve un contenedor que contiene el componente montado. Podemos usar findAll para buscar etiquetas

  • en el árbol de renderizado y verificar cuántas hay.

    Copie la prueba de abajo en test / specs / List.spec.js.

    Vea pasar las pruebas con la unidad de ejecución npm. Tenga en cuenta que tenemos un mensaje de error personalizado para nuestra afirmación. Los mensajes predeterminados no son muy legibles, por lo que es mejor agregar los nuestros.

    Ahora agregue un nuevo archivo test / specs / MessageToggle.spec.js. Aquí escribiremos una prueba para, lo has adivinado, MessageToggle.vue.

    Vamos a escribir dos pruebas ahora. Uno verificará que la etiqueta

    muestre un mensaje predeterminado. Usaremos Shallow nuevamente para obtener un contenedor que contenga el componente montado, y usaremos el método de texto para devolver el texto dentro de la etiqueta

    .

    La segunda prueba es similar. Afirmaremos que el mensaje cambia cuando se presiona el botón de alternar mensaje. Para hacer eso, podemos usar el método de disparo.

    Copie el siguiente código en test / specs / MessageToggle.spec.js:

    Ejecute las pruebas nuevamente con npm run unit. Woop: pruebas verdes

    Pros y contras de la cinta

    Ahora hemos agregado algunas pruebas, veamos los pros y los contras del uso de la cinta.

    Pros

    • Es rápido
       Me gusta realmente rápido
    • Es sencillo
       Puedes leer el código fuente para
    • Utiliza TAP.
      Debido a que TAP es un estándar, hay muchos programas que funcionan directamente con TAP
      Al igual que el módulo tap-spec, simplemente le enviamos texto TAP y lo prettificamos para nosotros
    • Afirmaciones limitadas
       Las afirmaciones limitadas hacen que sus afirmaciones sean fáciles de entender.

    Contras

    • Afirmaciones limitadas
       Esto también es una estafa
      Puede obtener mensajes de error útiles con aserciones como hasBeenCalledWith, esto es difícil de replicar con t.equal
    • Se rompe
      Cuando ejecutas más de 10000 pruebas
      Probablemente no lo golpees. Pero podría ser un factor decisivo para un gran proyecto Vue
    • Es basico
       Deberá usar otras bibliotecas para burlarse, tropezar y falsificar

    Los pros y los contras son bastante similares. La cinta es básica, y eso puede ser algo bueno o malo dependiendo de a quién le pregunte.

    Sin embargo, lo más importante, ¡es increíblemente rápido!

    Las pruebas unitarias rápidas son buenas pruebas unitarias.

    Llamada a la acción

    La mejor manera de elaborar un nuevo marco de prueba es usarlo.

    En el próximo proyecto de Vue que inicie, pruebe Tape. Puede encontrar una lista de aserciones en la cinta README.

    Disfruta

    Puedes encontrar el repositorio terminado en GitHub.