I have a vuejs modal component that shows the modal of team members (avatar, full_name & description). I need to test it.
teamMembers.js looks like :
<template lang="pug">
.col-lg-4.col-md-6.team_member_wrapper
a(href="javascript:;" data-toggle="modal" data-target="#TeamMemberModal" @click="$emit('clicked', item)" )
.team_member
.team_member_image
img(:src="item.avatar")
.team_member_name
.team_member_status
.team_member_shadow
</template>git status
<script>
export default {
name: "TeamMember",
props: {
item: {},
}
};
</script>
my test code is :
import Vue from 'vue'
import TeamMember from '@/components/TeamMember.vue'
import { mount } from '@vue/test-utils'
const wrapper = mount(TeamMember, {
context: {
props : {
item : {
avatar : 'path/to_image.png',
full_name: "Robocop"
}
}
}
});
I need to validate that the template generated the correct html - while the Wrapper must contain a Vue instance. I did this :
wrapper.setProps({ avatar: 'path/to_image.png' }),
expect(wrapper.vm.avatar).toBe('path/to_image.png'),
wrapper.setProps({ avatar: 'Robocop' }),
expect(wrapper.vm.full_name).toBe('Robocop')
I run my test, got the following result :
FAIL tests/unit/specs/TeamMember.spec.js
● Test suite failed to run
[vue-test-utils]: mount.context can only be used when mounting a functional component
9 | item : {
10 | avatar : 'path/to_image.png',
> 11 | full_name: "Robocop"
| ^
12 | }
13 | }
14 | }
at throwError (node_modules/@vue/test-utils/dist/vue-test-utils.js:11:9)
at createInstance (node_modules/@vue/test-utils/dist/vue-test-utils.js:2847:5)
at mount (node_modules/@vue/test-utils/dist/vue-test-utils.js:5639:18)
at Object.<anonymous> (tests/unit/specs/TeamMember.spec.js:11:36)
what mistake in my code, & how can I correct it ? Thanks
Aucun commentaire:
Enregistrer un commentaire