Pruebas unitarias frente a E2E para Vue.js

Escribir pruebas al desarrollar aplicaciones Vue.js puede ahorrarle mucho tiempo que, de lo contrario, se dedicaría a corregir errores. Cuanto más grande y compleja se vuelve su aplicación, más real se vuelve.

Hay dos tipos de pruebas que se realizan comúnmente para aplicaciones web: pruebas unitarias y de extremo a extremo (E2E) pruebas.

¿Cual es la diferencia? ¿Necesitas ambos?

Vamos a explorar.

Pruebas unitarias

La idea de una “unidad” en las pruebas es dividir el código en partes pequeñas y fácilmente comprobables. Por lo general, la unidad es una sola función, pero también puede ser una clase o incluso un algoritmo complejo.

Un concepto crucial de las pruebas unitarias es que una entrada dada de la función siempre debe dar como resultado la misma salida.

Por ejemplo, si tuviéramos una función que suma dos números llamada add podríamos escribir una prueba unitaria para asegurarnos de que un par de números en particular que proporcionamos como argumentos siempre arrojaría el resultado que esperamos.

agregar.spec.js

// Function we want to test
const add = (x, y) => x + y;

// Unit test
test("should add two numbers", () => {
  const result = add(2, 3);
  expect(result).toBe(5);
});

Cada vez que ejecutamos esa prueba y no es igual a 5, podemos concluir que un error ha ingresado a nuestro código.

Pruebas de componentes

En la mayoría de las aplicaciones de Vue.js, las funciones no representan realmente la composición atómica de la aplicación. Claro, podemos realizar pruebas unitarias de nuestros métodos, pero lo que realmente nos importa es el HTML que se genera.

Por esta razón, la unidad en una prueba de la aplicación Vue.js es una componente en lugar de una función.

¿Cómo probamos los componentes? Tomemos este como ejemplo:

mostrarsaludo.js

export default {
  template: `<div>Hello, {{ name }}</div>`,
  props: ['name']
};

Como se indicó anteriormente, una prueba unitaria debe, para una entrada dada (en este caso, un accesorio), devolver una salida consistente (en este caso, contenido de texto).

Usando una biblioteca como Vue Test Utils, podemos montar un componente Vue en la memoria y crear un objeto “envoltorio”. Luego podemos consultar el contenedor para hacer afirmaciones sobre el HTML representado.

mostrarsaludo.spec.js

import displayGreeting from "./displayGreeting.js";

test("displays message", () => {
  const name = "Michael";
  const wrapper = mount(displayGreeting, { propsData: { name } });
  expect(wrapper.text()).toBe(`Hello, ${name}`);
});

Pruebas de instantáneas

En el ejemplo anterior, usamos el wrapper.text() para consultar el texto en la salida del componente.

Sin embargo, en la mayoría de los componentes, probar la veracidad de la salida requerirá más de un fragmento de texto. A menudo queremos asegurarnos de que haya una variedad de elementos presentes.

¿Tal vez sería más fácil probar toda la salida HTML del componente?

Otro tipo de prueba de unidad de componente es una instantánea prueba donde haces exactamente eso.

Cómo funciona es que genera la salida del componente una vez y la escribe en un archivo de texto. Por ejemplo:

mostrarsaludo.spec.js.snap

exports[`renders correctly 1`] = `<div>Hello, Michael</div>`;

Ahora, cada vez que se ejecutan las pruebas, si la salida renderizada del componente difiere de lo que hay en el archivo, la prueba fallará.

Las instantáneas son un instrumento contundente, pero son buenas para probar componentes que muestran mucho HTML.

Pruebas E2E

Las pruebas E2E (extremo a extremo) son un tipo de prueba funcional. A diferencia de una prueba unitaria, no está dividiendo la aplicación en partes más pequeñas para probarla, está probando la aplicación completa.

Las pruebas E2E interactúan con su aplicación como lo haría un usuario real. Por ejemplo, puede escribir una prueba E2E que:

  1. Carga tu sitio
  2. Hace clic en el enlace “Registrarse”
  3. Proporciona algunos detalles válidos para las entradas en el formulario de registro.
  4. Haga clic en el botón “Registrarse”.

Esta prueba debería pasar si se almacenó un token de autenticación en las cookies y la aplicación redirigió a la página de perfil.

Instrumentos

Las pruebas E2E se realizan sobre un controlador de automatización del navegador como Selenium que proporciona una API para controlar el navegador.

Un marco de prueba de E2E como Cypress o Nightwatch le proporcionará una forma de programar sus pruebas de E2E para el controlador de automatización del navegador.

El siguiente código es lo que podría usar en Nightwatch para realizar la prueba descrita en la sección anterior. Probablemente sepa lo que hace incluso si nunca ha usado Nightwatch.

registro.spec.js

"register user": browser => {

  // Navigate to register page
  browser.page.register()
    .navigate()
    .waitForElementPresent(form.selector, 5000);

  // Fill out the form
  register.section.form
    .setValue("@nameInput", "Anthony")
    .setValue("@emailInput", "anthony@test.com")
    .setValue("@passwordInput", "test1234")
    .click("@submitButton");

  // Make assertions
  browser
    .assert.urlEquals(profile.url)
    .getCookie(name, (result) => {
      this.assert.equals(result.name, 'auth');
    }
  });

}

Comparación de unidades y E2E

Ventajas de la unidad:

  • Las pruebas se ejecutan rápido
  • Las pruebas son precisas y le permiten identificar problemas exactos

Contras de la unidad:

  • Lleva mucho tiempo escribir pruebas para cada aspecto de su aplicación
  • A pesar de la aprobación de las pruebas unitarias, es posible que toda la aplicación aún no funcione

Ventajas de E2E:

  • Puede probar implícitamente muchas cosas a la vez
  • Las pruebas E2E le aseguran que tiene un sistema en funcionamiento

Contras de E2E:

  • Lento para ejecutarse: a menudo tardará entre 5 y 10 minutos en ejecutarse para un sitio
  • Frágil: un cambio intrascendente, como cambiar una clase, puede derribar toda su suite E2E
  • Las pruebas no pueden identificar la causa de la falla

Veredicto

En mi opinión, una combinación de pruebas unitarias y E2E es el mejor enfoque. Los contras de un tipo pueden ser anulados en su mayoría por los pros del otro.

Por ejemplo, la prueba E2E no le dirá la causa raíz de la falla, pero las pruebas unitarias sí, mientras que las pruebas unitarias no le dirán si toda la aplicación funciona o no, mientras que las pruebas E2E sí lo harán.

El uso de estos tipos de prueba juntos le dará mucha confianza en su aplicación, lo que le permitirá agregar funciones o refactorizar sin temor a colapsar.

La estrategia general para combinar pruebas unitarias y E2E para una aplicación Vue.js es la siguiente:

  • Escriba pruebas unitarias para todos sus componentes, incluidos los estados de error. Ejecuta estos antes de hacer confirmaciones de git.
  • Escriba pruebas E2E para los casos de uso clave de su sitio, por ejemplo, registro, agregar al carrito, etc. Ejecútelos antes de fusionarse con el maestro.

Si desea más detalles sobre la combinación correcta de pruebas, hay muchas buenas publicaciones de blog como la clásica Escribir pruebas. No muchos. Sobre todo integración. por Kent C. Dodds.

Bonificación: herramientas de prueba

Así que está listo para comenzar a probar, ¿qué herramienta puede usar?

Para las pruebas de unidades frontend, la mejor herramienta en este momento es Es. Tiene muchas funciones útiles, por ejemplo, que le permite compilar TypeScript y JS moderno antes de ejecutar las pruebas.

Puedes usar Jest junto con Ver utilidades de prueba que le permite montar y consultar componentes de Vue.

Para E2E, la herramienta de última generación en este momento es Ciprés. Otra herramienta más básica que también funciona bien es Vision nocturna.

La buena noticia es que es fácil agregar todas estas herramientas a una aplicación Vue con Vue CLI 3.

Finalmente, es una buena idea usar una herramienta de integración continua como Travis o CI circular eso ejecutará sus pruebas en la nube (especialmente bueno para las pruebas E2E que consumen mucho tiempo) e implementará su código condicionado a que pasen todas sus pruebas.

¡Feliz prueba!


Conviértase en un desarrollador sénior de Vue en 2020.

Aprenda y domine lo que saben los profesionales sobre la creación, prueba e implementación de aplicaciones Vue de pila completa en nuestro curso más reciente.

Aprende más


Similar Posts

Leave a Reply

Your email address will not be published.