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.
How can I fix this issue?