Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

371
Vistas
Axios is not loading List Content in Unit Test => Empty Array

I have this list in my frontend

<ul>
  <li v-for="department in departments" :key="department.DepartmentId" data-test="department">
        {{ department.DepartmentName }}
  </li>
</ul>

and this action

methods: {
        async refreshData() {
            axios.get("http://localhost:49146/api/department").then((response) => {
                this.departments = response.data
            }).catch( error => console.log( 'error: ' + error ) );
        },

and this Unit Test

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

On my localhost everything is working. But my UnitTest is faulty, because apparently the departments list is empty.

Unit Test Fail

How can I fix this issue?

about 4 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda