Tengo esta lista en mi frontend
<ul> <li v-for="department in departments" :key="department.DepartmentId" data-test="department"> {{ department.DepartmentName }} </li> </ul>
y esta acción
methods: { async refreshData() { axios.get("http://localhost:49146/api/department").then((response) => { this.departments = response.data }).catch( error => console.log( 'error: ' + error ) ); },
y esta prueba unitaria
import axios from 'axios'; import DepartmentForm from '../../src/components/DepartmentForm.vue' import { mount, flushPromises } from '@vue/test-utils' const mockList = [ { DepartmentId: 1, DepartmentName: 'Support'}, { DepartmentId: 2, DepartmentName: 'IT'} ] // Following lines tell Jest to mock any call to `axios.get`and to return `mockPostList` instead jest.spyOn(axios, 'get').mockResolvedValue(mockList) describe('DepartmentForm.vue', () => { const wrapper = mount(DepartmentForm) it('Does a wrapper exist', () => { expect(wrapper.exists()).toBe(true) }) it('Has a department table', () => { expect(wrapper.find('table').exists()).toBe(true) }) it('Refreshes departments on mount', async () => { // Let's assert that we've called axios.get the right amount of times and // with the right parameters. expect(axios.get).toHaveBeenCalledTimes(1) expect(axios.get).toHaveBeenCalledWith('http://localhost:49146/api/department') // Wait until the DOM updates. await flushPromises() // Finally, we make sure we've rendered the content from the API. const departments = (wrapper.findAll('[data-test="department"]')) expect(departments).toHaveLength(2) expect(departments[0].text()).toContain('Support') expect(departments[1].text()).toContain('IT') }) })
En mi localhost todo funciona. Pero mi UnitTest es defectuoso, porque aparentemente la lista de departamentos está vacía.
¿Cómo puedo solucionar este problema?