如何在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 (将#修改为@）