如何解决如何在Vue快照测试中捕获对象道具
当我使用快照测试时,由于对象到字符串的强制,我总是得到[object Object]
来代替对象道具。我该如何解决?我尝试将元素包装到JSON.stringify()
中,但是会导致"Converting circular structure to JSON"
错误。
生成快照的示例:
exports[`SalesList.vue Снапшот десктоп 1`] = `
<magic-grid-stub
class="sales-list"
cols="[object Object]"
gaps="[object Object]"
usemin="true"
>
<sales-item-stub
class="item"
sale="[object Object]"
/>
<sales-item-stub
class="item"
sale="[object Object]"
/>
<sales-item-stub
class="item"
sale="[object Object]"
/>
<sales-item-stub
class="item"
sale="[object Object]"
/>
<sales-info-stub
class="item"
content="additionalInfo"
/>
</magic-grid-stub>
`;
我有简单的对应快照测试,例如:
import { createLocalVue,shallowMount } from '@vue/test-utils'
import SalesList from '@/components/sales/SalesList.vue'
let localVue
const fakeSale = {
code: 'code',description: 'description',title: 'title',image: 'image',archive: false,visible: true,date_to: '2020/08/01',short_description: 'short_description',slug: 'slug',date_from: '2020/06/01',seo: {
seo_description: 'seo_description',seo_title: 'seo_title',seo_keywords: 'seo_keywords',},}
function createWrapper(component,options) {
return shallowMount(component,{
localVue,...options,})
}
beforeAll(() => {
localVue = createLocalVue()
})
describe('SalesList.vue',() => {
it('Снапшот десктоп',async () => {
expect.assertions(1)
const wrapper = createWrapper(SalesList,{
propsData: {
sales: Array.from({ length: 4 },(_,index) => ({
...fakeSale,slug: `slug-${index}`,})),additionalInfo: 'additionalInfo',mocks: {
$device: { isDesktop: true },})
expect(wrapper.element).toMatchSnapshot()
})
})
有关组件本身:
<script lang="ts">
import SalesItem from '@/components/sales/SalesItem.vue'
import MagicGrid from '@/components/MagicGrid.vue'
import SalesInfo from '@/components/sales/SalesInfo.vue'
import Vue from 'vue'
export default Vue.extend({
name: 'SalesList',components: {
SalesItem,MagicGrid,SalesInfo,props: {
sales: {
type: Array,required: true,additionalInfo: {
type: String,default: null,computed: {
colsAndGaps(): {
cols: { 0: number }
gaps: { 0: number }
} {
return this.$device.isDesktopOrTablet
? {
cols: {0: 2},gaps: {0: 30},}
: {
cols: {0: 1},gaps: {0: 16},}
},})
</script>
<template>
<magic-grid v-bind="colsAndGaps" class="sales-list">
<sales-item
v-for="sale in sales"
:key="sale.slug"
:sale="sale"
class="item"
/>
<sales-info v-if="additionalInfo" :content="additionalInfo" class="item"/>
</magic-grid>
</template>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。