Introducción a las pruebas de instantáneas de Jest en Vue.js

Introducción

Las pruebas de instantáneas son un tipo de prueba en Jest que monitorea la regresión en tu código y también sirve como prueba de integración. La primera significa que si agregas más código a tu proyecto y algo pequeño falla, las pruebas de instantáneas pueden detectarlo. La segunda significa que las pruebas de instantáneas son una forma de asegurarse de que un componente completo se ejecute de la manera deseada.

La prueba de instantáneas funciona de la siguiente manera: la primera vez que ejecuta jest, se generan instantáneas del DOM. En las ejecuciones posteriores de su conjunto de pruebas, el DOM que se construye se compara con estas instantáneas. Como es posible que haya cambiado su código, las instantáneas que aún coinciden con las generadas la primera vez le indican que las cosas siguen funcionando.

Naturalmente, surgen algunas preguntas: ¿qué sucede si realizo un cambio significativo en su programa que da como resultado diferentes contenidos del DOM? Jest le permite generar nuevas instantáneas y un escenario como ese lo justificaría. ¿Qué sucede si hay contenido no determinista en mi página? Hay múltiples formas de manejar esto, ¡y las veremos en breve!

Configuración de la aplicación

Ahora configuraremos nuestra aplicación. Dirígete a la sección de configuración de nuestro tutorial sobre cómo probar Vue con Jest para configurar una aplicación simple para realizar pruebas. Así es como App.vuepodría verse tu archivo:

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

Y así es como se ve nuestro inicio app.spec.js:

import { mount } from "@vue/test-utils";import App from "./../src/App.vue";describe("App", () = {  // Inspect the raw component options  it("has data", () = {    expect(typeof App.data).toBe("function");  });});describe("Mounted App", () = {  const wrapper = mount(App);  test("is a Vue instance", () = {    expect(wrapper.isVueInstance()).toBeTruthy();  });  it("renders the correct markup", () = {    expect(wrapper.html()).toContain(      "pWhat is the sum of the two numbers?/p"    );  });  // it's also easy to check for the existence of elements  it("has a buttons", () = {    expect(wrapper.contains("button")).toBe(true);  });  it("renders correctly with different data", async () = {    wrapper.setData({ x1: 5, x2: 10 });    await wrapper.vm.$nextTick();    expect(wrapper.text()).toContain("10");  });  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");  });  it("button click with correct sum", () = {    wrapper.setData({ guess: "15" });    const button = wrapper.find("button");    button.trigger("click");    expect(wrapper.vm.message).toBe("SUCCESS!");  });});

Tenga en cuenta que ites solo un alias para testJest. Ejecútelo npm run testy todas las pruebas deberían pasar.

¡Comencemos a probar instantáneas!

Ejecute npm install --save-dev jest-serializer-vuey luego haga la siguiente adición apackage.json

paquete.json

{  ...  "jest": {    "snapshotSerializers": ["jest-serializer-vue"]  },  ...}

Agregue algo de código al segundo bloque de descripción.

it('renders correctly', () = {  const wrapper = mount(App)  expect(wrapper.element).toMatchSnapshot()})

Ejecute sus pruebas y observe cómo la primera vez que las ejecute debería ver "1 snapshot written". Observe que __snapshots__se ha creado un directorio llamado junto a app.spec.js.

No dudes en echar un vistazo al archivo de instantánea, que tiene un archivo que termina con la .snapextensión ; notarás que se ha reproducido toda la sección de plantilla del componente, excepto los atributos que tienen el prefijo v-.

Ejecute sus pruebas nuevamente.

¡Error!

¡¿Por qué?!

Si examinas la salida de la prueba de instantánea en tu terminal, queda claro por qué: hemos generado números de forma aleatoria en nuestra página. También deberías poder ver cuáles son los números en la instantánea. Continúa y sustitúyelos en tu prueba pasándolos datacuando montes tu componente; la función que pases se fusionará con la del propio componente data.

Debería verse algo así una vez que vuelva a funcionar:

it('renders correctly', () = {  const wrapper = mount(App, {    data() {      return {        x1: 37,        x2: 99      }    }  })      expect(wrapper.element).toMatchSnapshot()})

Otro enfoque es escribir una función simulada para la función no determinista en nuestro código. En nuestro caso, es Math.random().

Terminarías con algo como lo siguiente:

it('renders correctly with mock', () = {  Math.random = jest.fn(() = .37);  const wrapper = mount(App)      expect(wrapper.element).toMatchSnapshot()})

Digamos que queremos mover el encabezado para que quede sobre la foto en la página. Esta es una modificación sencilla para el componente Vue, así que adelante y hágalo. Intente ejecutar el conjunto de pruebas nuevamente.

¡Error!

Falló porque nuestra instantánea tiene la página organizada de forma diferente. Debemos actualizar esa parte de nuestra instantánea y podemos hacerlo ejecutando npm test -- -u.

Ahora nuestras pruebas pasan nuevamente.

¡Éxito!

Si desea actualizar instantáneas de forma interactiva, puede ejecutar npm test -- -i.

Conclusión

Las instantáneas pueden ser muy útiles para mantenerse al tanto de cualquier cambio accidental en la interfaz de su aplicación. Las instantáneas deben registrarse en Git como cualquier otro código. Si las pruebas fallan, verifique lo que sucedió antes de actualizar reflexivamente sus instantáneas.

Las pruebas de instantáneas pueden resultar muy útiles para probar sus aplicaciones Vue, especialmente a medida que se vuelven más complejas. ¡Buena suerte!