Mocks en Vue.js: interceptando funciones
Contenido del curso
Montando un componente
Acciones y mocks
Un paso adicional
Cierre
Mocks en Vue.js: interceptando funciones
Mocks en Vue.js: interceptando funciones
Contenido del curso
Ameth Ordoñez Erazo
María Camila Lenis Restrepo
Profesor
Eden Josue Lazo Fuentes
Daniel Muñoz Martín
Evaristo Perez Lopez
Evaristo Perez Lopez
Jordi Armengol Cherto
Martín Gerardo Suárez Hernández
Uriel Solis Salinas
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.
Gracias por tu aporte 🤓 buena nota mental
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
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.
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); });
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); });
Eso si es un problema porque entonces este curso no funcionaria para VueJS v3
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. })