Mocks en Vue.js: interceptando funciones

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.

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.

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.

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);
  });

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.
  })