Mocks en Vue.js: interceptando funciones

Clase 10 de 14 • Curso de Unit Testing en Vue.js 3

Ameth Ordoñez Erazo

student•

NOTA MENTAL: 💆‍♂️

Los Mocks es un tipo de prueba que consisten en crear objetos falsos que sustituyan a los objetos reales y de esta manera poder probar un determinado requerimiento. El objetivo de utilizar objetos fake en lugar de reales, es romper las dependencias con otros objetos y de esta manera probar requerimientos de manera independiente. Estos objetos se usan para probar que se realizan correctamente llamadas a otros métodos, por ejemplo, a una web API, y poder validar el comportamiento del componente al obtener una respuesta de parte de esa API.

María Camila Lenis Restrepo

teacher•

Gracias por tu aporte 🤓 buena nota mental

Eden Josue Lazo Fuentes

student•

Adicionalmente sirve no solo para saber si son llamados, sino para probar los comportamientos esperados utilizando estos fakes sin tener que depender de recursos externos

Daniel Muñoz Martín

student•

Como bien dice la profesora, podríamos testear una llamada a una API, pero sin realizar la llamada como tal, debemos simular la respuesta (con un mock) que obtenemos y ver el comportamiento, así no saturamos a nuestro backend haciendo llamadas innecesarias cuando estemos haciendo pruebas unitarias.

Evaristo Perez Lopez

student•

La información de esta lección aún funciona en Vue3 siempre que se siga utilizando Options API. Yo estaba utilizando Composition API y no estaba funcionando. Creí que sería útil mencionarlo.

Evaristo Perez Lopez

student•

Resolví el último ejercicio de la siguiente manera:

  it("Mock the method and call it as well", async () => {
    const initialCounter = 0;
    const mockIncrement = jest.fn();

    const wrapper = shallowMount(HelloWorld);
    // mock
    wrapper.vm.increment = mockIncrement;

    const component = wrapper.find("#button");
    await component.trigger("click");
    expect(mockIncrement).toHaveBeenCalledTimes(1);
    expect(wrapper.vm.counter).toBe(initialCounter);
  });

Jordi Armengol Cherto

student•

setMethods está deprecado. https://v1.test-utils.vuejs.org/api/wrapper/#setmethods

Una forma de mockear que se me ocurre es esta.

test.only("button click should call increment function using mock", async () => {
    const initialCounter = 10;     
    const mockIncrement = jest.fn();

    const wrapper = shallowMount(HelloWorld, {
      data() {
        return {
          counter: initialCounter,
        };
      },
      methods: {
        increment: mockIncrement
      }
    });

    const component = wrapper.find("#but-increment");
    await component.trigger("click");

    expect(mockIncrement).toHaveBeenCalledTimes(1);
    expect(wrapper.vm.counter).toBe(initialCounter);
  });

Martín Gerardo Suárez Hernández

student•

Eso si es un problema porque entonces este curso no funcionaria para VueJS v3

Uriel Solis Salinas

student•

Aquí les dejo los códigos con notas, espero les sirva.

  it('button click should call increment and counter data increments', async () => {
    const spyIncrement = jest.spyOn(HelloWorld.methods, 'increment') // Creamos un espía para el método increment.
    // Un espia es una función que nos permite saber si una función ha sido llamada.
    // jest.spyOn es una función de Jest que nos permite crear un espía para un método.

    const wrapper = shallowMount(HelloWorld) // Montamos el componente HelloWorld en un entorno de prueba.

    const component = wrapper.find('#but-increment') // Buscamos el elemento con el id but-increment.
    await component.trigger('click') // Simulamos un click en el elemento.

    expect(spyIncrement).toHaveBeenCalled() // Comprobamos que el método increment ha sido llamado.
    // toHaveBeenCalled es una función de Jest que nos permite comprobar si una función ha sido llamada.
    expect(wrapper.vm.counter).toBe(1) // Comprobamos que el valor de la propiedad count del componente es 1.
  })

  it('button click should call increment function using mock', async () => {
    const mockedIncrement = jest.fn() // Creamos un mock para el método increment.
    // Un mock es una función que nos permite simular el comportamiento de una función.
    // jest.fn es una función de Jest que nos permite crear un mock para una función.

    const wrapper = shallowMount(HelloWorld) // Montamos el componente HelloWorld en un entorno de prueba.

    wrapper.setMethods({ increment: mockedIncrement }) // Sobreescribimos el método increment del componente por el mock.
    // setMethods es una función de Vue Test Utils que nos permite sobreescribir los métodos de un componente.

    const component = wrapper.find('#but-increment') // Buscamos el elemento con el id but-increment.
    await component.trigger('click') // Simulamos un click en el elemento.

    expect(mockedIncrement).toHaveBeenCalled() // Comprobamos que el mock ha sido llamado.
    expect(wrapper.vm.counter).toBe(0) // Comprobamos que el valor de la propiedad count del componente es 0.
  })

  it("Mock the method and call it as well", async () => {
    const initialCounter = 0;
    const mockIncrement = jest.fn();

    const wrapper = shallowMount(HelloWorld);
    // mock
    wrapper.vm.increment = mockIncrement;

    const component = wrapper.find("#button");
    await component.trigger("click");
    expect(mockIncrement).toHaveBeenCalledTimes(1);
    expect(wrapper.vm.counter).toBe(initialCounter);
  });

test.only("button click should call increment function using mock", async () => {
    const initialCounter = 10;     
    const mockIncrement = jest.fn();

    const wrapper = shallowMount(HelloWorld, {
      data() {
        return {
          counter: initialCounter,
        };
      },
      methods: {
        increment: mockIncrement
      }
    });

    const component = wrapper.find("#but-increment");
    await component.trigger("click");

    expect(mockIncrement).toHaveBeenCalledTimes(1);
    expect(wrapper.vm.counter).toBe(initialCounter);
  });

  it('button click should call increment and counter data increments', async () => {
    const spyIncrement = jest.spyOn(HelloWorld.methods, 'increment') // Creamos un espía para el método increment.
    // Un espia es una función que nos permite saber si una función ha sido llamada.
    // jest.spyOn es una función de Jest que nos permite crear un espía para un método.

    const wrapper = shallowMount(HelloWorld) // Montamos el componente HelloWorld en un entorno de prueba.

    const component = wrapper.find('#but-increment') // Buscamos el elemento con el id but-increment.
    await component.trigger('click') // Simulamos un click en el elemento.

    expect(spyIncrement).toHaveBeenCalled() // Comprobamos que el método increment ha sido llamado.
    // toHaveBeenCalled es una función de Jest que nos permite comprobar si una función ha sido llamada.
    expect(wrapper.vm.counter).toBe(1) // Comprobamos que el valor de la propiedad count del componente es 1.
  })

  it('button click should call increment function using mock', async () => {
    const mockedIncrement = jest.fn() // Creamos un mock para el método increment.
    // Un mock es una función que nos permite simular el comportamiento de una función.
    // jest.fn es una función de Jest que nos permite crear un mock para una función.

    const wrapper = shallowMount(HelloWorld) // Montamos el componente HelloWorld en un entorno de prueba.

    wrapper.setMethods({ increment: mockedIncrement }) // Sobreescribimos el método increment del componente por el mock.
    // setMethods es una función de Vue Test Utils que nos permite sobreescribir los métodos de un componente.

    const component = wrapper.find('#but-increment') // Buscamos el elemento con el id but-increment.
    await component.trigger('click') // Simulamos un click en el elemento.

    expect(mockedIncrement).toHaveBeenCalled() // Comprobamos que el mock ha sido llamado.
    expect(wrapper.vm.counter).toBe(0) // Comprobamos que el valor de la propiedad count del componente es 0.
  })

Mocks en Vue.js: interceptando funciones

Introducción

¿Por qué hacer testing en Vue.js?

Tipos de testing en Vue.js

Proyecto del curso: QR Generator App

Montando un componente

¿Qué se debe testear en Vue.js? Vue App y Vue Test

Una caja de arena: tu primera prueba en Vue.js

Probando dependencias de Vue

Shallow mount vs. mount

Wrapper: probando elementos y estados

Acciones y mocks

Prueba de eventos: ejecutando acciones en el componente

Mocks en Vue.js: interceptando funciones

Prueba de eventos emitidos entre múltiples componentes

Testing de UI: probando estados de la interfaz

Un paso adicional

Vue Test Coverage

Cierre

¿Quieres más cursos de testing en Vue?