In my current app I am trying to pass data to this.listData. Because based on the fact if this contains data, it will loop through a v-for and then output all the list items. In order to do so I need to write a test that will pass data to this.listData. Based on my screenshot there is only a UL-element and no LI-element. So in React Jest testing I know how to do that, but with Vue I am a complete noob.
// DataField.vue
<ul class="three">
<li
v-for="(post, index) in listData.data"
:key="index"
></li>
</ul>
data () {
return {
listData: []
}
},
mounted () {
this.getData()
},
methods: {
getData () {
axios.get('http://localhost:8085/').then(response => {
this.listData = response.data
})
.catch(function (error) {
console.log(error);
})
},
// DataField.spec.js
import {
mount,
shallowMount
} from '@vue/test-utils'
import DataField from './DataField.vue'
import axios from 'axios';
jest.mock('axios');
describe('DataField', () => {
test('axios ', () => {
const wrapper = mount(DataField);
wrapper.setData({
"data": [{
"name": "A",
"description": "This is a description of A",
"parentId": ""
},
{
"name": "B",
"description": "This is a description of B",
"parent": "A"
}
]
})
const wrapper = shallowMount(DataField)
expect(wrapper.find('li').toBeVisible()).toBe(true)
});
test('should mount', () => {
const wrapper = mount(DataField)
expect(wrapper.isVueInstance()).toBeTruthy()
});
})
Aucun commentaire:
Enregistrer un commentaire