No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Mocks en Vue.js: interceptando funciones

10/14
Recursos

Aportes 5

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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