问题描述
最近,当我需要测试使用诸如 MglMarker 之类的Vue MapBox组件的自己的组件时,我在单元测试中遇到了问题。我的想法是拥有自己的标记,因为我需要使用Google Optimize进行A / B测试,但是为此,我仅使用Jest模拟了它们的属性,例如$ exp.name和$ exp。$ activeVariants。我真正的问题是测试MapBox组件。
这就是我要测试的组件:
<template>
<div>
<div v-if="experimentName === 'price-marker'">
<div v-if="variant === 'icon'">
<MglMarker
v-for="(item,index) of properties"
:key="index"
:coordinates="[item.property.longitude,item.property.latitude]"
>
<img
v-if="propertyHover === index"
slot="marker"
class="icon-marker-selected"
src="@/assets/img/markers/selected.png"
@click="selectMarker(item)"
@mouseleave="setPropertyHover(-1)"
/>
<img
v-if="propertyHover !== index"
slot="marker"
class="icon-marker"
src="@/assets/img/markers/no-selected.png"
@click="selectMarker(item)"
@mouseenter="setPropertyHover(index)"
/>
</MglMarker>
</div>
<div v-if="variant === 'price'">
<MglMarker
v-for="(item,item.property.latitude]"
>
<div
v-if="propertyHover === index"
slot="marker"
class="price-marker-selected"
@click="selectMarker(item)"
@mouseleave="setPropertyHover(-1)"
>
<h5 class="price-text">{{ item.sellValue | toPesos }}</h5>
</div>
<div
v-if="propertyHover !== index"
slot="marker"
class="price-marker"
@click="selectMarker(item)"
@mouseenter="setPropertyHover(index)"
>
<h5 class="price-text">{{ item.sellValue | toPesos }}</h5>
</div>
</MglMarker>
</div>
</div>
</div>
</template>
<script>
import { MglMarker } from 'vue-mapBox'
import { mapMutations,mapState } from 'vuex'
export default {
filters: {
toPesos: value => {
return value !== 'Precio'
? `$${('' + value).replace(/\B(?=(\d{3})+(?!\d))/g,',')}`
: value
}
},components: {
MglMarker
},props: {
properties: {
type: Array,default: () => {
return []
}
},generateDetailUrl: {
type: Function,default: () => {
return ''
}
}
},data() {
return {
experimentName: this.$exp.name,variant: this.$exp.$activeVariants[0]
}
},computed: {
...mapState({
propertyHover: state => state.search.propertyHover
})
},methods: {
...mapMutations({
setPropertyHover: 'search/setPropertyHover'
}),selectMarker(item) {
this.$router.push(this.generateDetailUrl(item))
}
}
}
</script>
那是失败的测试:
import Vuex from 'vuex'
import { shallowMount,createLocalVue } from '@vue/test-utils'
import MapMarker from '@/components/map/MapMarker.vue'
import MglMarker from 'vue-mapBox'
const localVue = createLocalVue()
localVue.use(Vuex)
localVue.use(MglMarker)
describe('MapMarker.vue',() => {
let state
let store
const $exp = {
name: 'price-marker',$activeVariants: ['icon']
}
const mapMarkerProps = {
properties: [
{
id: 1,rentValue: 1800000,status: 'PROMOTION',type: 'APARTMENT'
},{
id: 2,rentValue: 420000,type: 'APARTMENT'
}
],generateDetailUrl: () => {
return '/apartment-to-rent/neighborhood-city/10000'
}
}
const mapMarkerData = {
experimentName: 'price-marker',variant: 'icon'
}
beforeEach(() => {
state = {
propertyHover: -1
}
store = new Vuex.Store({
modules: {
search: {
state
}
}
})
})
it('render correct MglMarker component',() => {
const wrapper = shallowMount(MapMarker,{
localVue,store,mocks: {
$exp
}
})
wrapper.setProps(mapMarkerProps)
wrapper.setData(mapMarkerData)
expect(wrapper.findComponent(MglMarker).exists()).toBe(true)
})
})
我该如何解决?
谢谢!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)