如何使用Jest测试Vue.js模态组件

Question

我有一个vuejs模态组件，它显示团队成员的模态(avatar，full_name&description(。我需要测试一下。

teamMembers.js看起来像：

<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 {{item.full_name}}
.team_member_status {{item.status}}
.team_member_shadow
</template>git status
<script>
export default {
name: "TeamMember",
props: {
item: {},
}
};
</script>

我的测试代码是：

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"
}
} 
}
});

我需要验证模板是否生成了正确的html-而Wrapper必须包含Vue实例。我做到了：

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

我进行了测试，得到了以下结果：

失败测试/单元/规格/团队成员.spec.js

●测试套件无法运行

[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)

我的代码中有什么错误，&我该如何更正？感谢

Answer 1

您传递的选项应该在对象的根级别，并且props数据是用propsData选项设置的：

const wrapper = mount(TeamMember, {
propsData: {
item: {
avatar: 'path/to_image.png',
full_name: 'Robocop'
}
}
})