testing - 如何使用 Jest 测试 Vue.js 模态组件?
问题描述
我有一个 vuejs 模态组件,它显示团队成员的模态(头像、全名和描述)。我需要测试它。
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')
我运行测试,得到以下结果:
失败测试/unit/specs/TeamMember.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)
我的代码中有什么错误,我该如何纠正?谢谢
解决方案
您传递的选项应该位于对象的根级别,并且使用以下propsData
选项设置道具数据:
const wrapper = mount(TeamMember, {
propsData: {
item: {
avatar: 'path/to_image.png',
full_name: 'Robocop'
}
}
})
推荐阅读
- python - 如何将 seaborn 联合图轴设置为对数刻度
- android - Phonegap 打开导航器 err_unknown_url_scheme
- java - 为实体创建通用验证器的最佳实践
- python - 如何将标准化应用于训练和测试数据集
- pdf - 工具栏=0 在隐藏 pdf 的工具栏时不适用于 firefox 所以如何在 firefox 中隐藏 pdf 工具栏
- java - Java 8 DateTimeFormatter,可选部分不带秒
- tensorflow - 有没有使用多节点多GPU进行分布式TensorFlow训练的例子?
- kubernetes - 主机的 Google Kubernetes Engine 时区
- reactjs - 如何在 reactcommerce 的个人资料页面中隐藏 TagNav
- react-native - 没有一个反应原生教程来集成谷歌地图作品