Daniel Muñoz Martín
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
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
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
Martín Gerardo Suárez Hernández
Eso si es un problema porque entonces este curso no funcionaria para VueJS v3
Uriel Solis Salinas
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. })
