Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

363
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!