Cómo probar los componentes de Vue con el marco de pruebas Jest

Introducción

Jest es un popular marco de pruebas de JavaScript que viene repleto de ventajas para los desarrolladores. Si no estás familiarizado en absoluto con el funcionamiento de Jest en general, te recomiendo que comiences con esta introducción. Una vez que comprendas los conceptos básicos de Jest, estarás listo para comenzar y ver cómo se puede usar para probar tus aplicaciones Vue.

Configuración e instalación de dependencias

Si aún no tiene Vue CLI instalado en su máquina, comience ejecutando:

npm install -g @vue/cli

o si prefieres Hilo:

yarn global add @vue/cli

Ahora podrá ejecutar el vuecomando desde la línea de comandos. Vamos a crear una aplicación Vue llamada alligator-test.

vue create alligator-test

Seleccione el valor predeterminado en el mensaje (presione la tecla Enter). Luego, ejecute el siguiente comando para agregar nuestras dependencias de prueba ( @vue/cli-plugin-unit-jesty @vue/test-utils):

npm install @vue/cli-plugin-unit-jest @vue/test-utils

A continuación, modifique el archivo package.json de su proyecto para que tenga una entrada scriptsque diga "test": "jest".

Luego, crea un archivo jest.config.jscon el siguiente contenido:

jest.config.js

module.exports = {  preset: '@vue/cli-plugin-unit-jest'}

Ahora, abra el alligator-testdirectorio en el editor de código de su elección.

Codificación de una aplicación sencilla

Hagamos algunos cambios en los archivos predeterminados que vue-clicrea para nosotros.

Eliminar el src/componentsdirectorio y modificarlo App.vuede la siguiente manera:

Aplicación.vue

template  div      div        h3Let us test your arithmetic./h3        pWhat is the sum of the two numbers?/p        div          p{{ x1 }} + {{ x2 }} =/p input v-model="guess" button v-on:click="check"Check Answer/button        /div        button v-on:click="refresh"Refresh/button        p{{message}}/p      /div  /div/templatescriptexport default {  name: 'App',  data() {    return {      x1: Math.ceil(Math.random() * 100),      x2: Math.ceil(Math.random() * 100),      guess: "",      message: ""    }  },  methods: {    check() {      if (this.x1 + this.x2 === parseInt(this.guess)) {        this.message = "SUCCESS!"      } else {        this.message = "TRY AGAIN"      }    },    refresh() {      this.x1 = Math.ceil(Math.random() * 100);      this.x2 = Math.ceil(Math.random() * 100);    }  }}/scriptstyle#app {  font-family: Avenir, Helvetica, Arial, sans-serif;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  text-align: center;  color: #2c3e50;  margin-top: 60px;}.inline * {  display: inline-block;}img {  height: 350px;}/style

Eche un vistazo al código y vea si puede descubrir qué hace la aplicación.

Luego continúa y ejecútalo npm run servedesde el directorio raíz de tu proyecto.

Ahora dirígete a localhost:8080tu navegador y verás la aplicación funcionando.

¡Intenta hacer algunas conjeturas! Con suerte, podrás aprobar la prueba antes de que comencemos a escribir las nuestras.

Probando la aplicación con Jest

Cree una carpeta llamada __tests__en el directorio raíz de su proyecto, lo cual es jestla convención estándar.

Dentro de __tests__, crea un archivo llamado app.spec.js. De manera predeterminada, jestcapturará todos los archivos de prueba (buscando recursivamente en las carpetas) en tu proyecto que tengan el nombre *.spec.jso *.test.js.

En la parte superior app.spec.jsvamos a importar lo siguiente, @vue/test-utilsasí como nuestro Apppropio componente:

import { mount } from '@vue/test-utils'import App from './../src/App.vue'

Escribamos nuestra primera prueba.

describe('App', () = {  // Inspect the raw component options  it('has data', () = {    expect(typeof App.data).toBe('function')  })})

Ejecútalo npm testen tu terminal: ¡la prueba debería pasar! Esta es una prueba bastante básica que verifica si datanuestro componente es una función. Tal como la escribimos en la fase de codificación de este tutorial, de hecho la definimos como una función.

Agreguemos otro describebloque a nuestro archivo de prueba.

describe('Mounted App', () = {  const wrapper = mount(App);  test('does a wrapper exist', () = {    expect(wrapper.exists()).toBe(true)  })})

Esta vez, montamos el componente, lo que nos devuelve un wrapper. Un contenedor es una instancia simulada de Vue.

Advertencia: Dado que la publicación isVueInstanceha quedado obsoleta, la prueba para “es una instancia de Vue” se ha reescrito a “existe un contenedor”.

Podemos usarlo para validar si ciertos valores están presentes mediante expectla función de Jest. Podemos escribir pruebas como esta:

it('renders the correct markup', () = {  expect(wrapper.html()).toContain('What is the sum of the two numbers?')})

Y esto:

// it's also easy to check for the existence of elementsit('has a button', () = {  expect(wrapper.find('button').exists()).toBe(true)})

Advertencia: Dado que la publicación containsha quedado obsoleta, wrapper.contains()se ha reemplazado por wrapper.find().

¡Todas estas pruebas se superan! Escribamos algunas pruebas para la funcionalidad más específica de Vue de la aplicación.

it('renders correctly with different data', async () = {  wrapper.setData({ x1: 5, x2: 10 })  await wrapper.vm.$nextTick()  expect(wrapper.text()).toContain('10')})

setDatapermite configurar los datos del componente. Dado que esas variables se inicializaron en data, son reactivas. Sin embargo, cuando estamos simulando nuestro componente, debemos llamar $nextTick()a wrapper.vm, que es el componente subyacente al contenedor. Luego, podemos encontrar que nuestras propiedades reactivas se actualizan.

Por último, vamos a probar si nuestra aplicación da el resultado correcto según lo que pretendemos que haga: ¡probar la suma!

it('button click without correct sum', () = {  expect(wrapper.vm.message).toBe("")  const button = wrapper.find('button')  button.trigger('click')  expect(wrapper.vm.message).toBe('TRY AGAIN')})

wrapper.finddevuelve un contenedor para el elemento de botón (aunque hay 2 botones en nuestra página, el que queremos es el primer botón de la página, por lo que se obtiene). x1y x2se configuran a partir de nuestra prueba anterior. Pero guess, la variable que está conectada al elemento de entrada a través de v-model, no lo está. Por lo tanto, cuando se hace clic en el botón de envío, no se ha ingresado la suma correcta. Por lo tanto, esperamos que messagesea TRY AGAIN. Cuando ejecute npm testla prueba, debería pasar.

it('button click with correct sum', () = {  wrapper.setData({ guess: "15" })  const button = wrapper.find('button')  button.trigger('click')  expect(wrapper.vm.message).toBe('SUCCESS!')})

Por otro lado, cuando configuramos la suma como correcta, wrapper.vm.messagedirá '¡ÉXITO!'

Conclusión

Espero que este tutorial te haya resultado útil para saber cómo empezar a probar Vue.js con Jest. ¡Buena suerte! ¡Prueba tu aplicación!

Desde este punto, si estás interesado en profundizar en lo que Jest puede hacer, te recomiendo leer sobre pruebas instantáneas.