Vue Test Utils - 数据在测试之间持续存在

Question

我试图弄清楚如何使用新数据开始每次测试，但我似乎无法成功。

这是我的测试文件之一：

import { createLocalVue, shallowMount } from '@vue/test-utils'
import Vue from 'vue'
import Vuetify from 'vuetify'
import VueFormGenerator from 'vue-form-generator'
import CustomerDetailsTabGroups from '@/modules/customer/view/component/CustomerDetailsTabGroups.vue'
import { customerMock } from './mocks/customerMock'

Vue.use(Vuetify)
Vue.use(VueFormGenerator)

const localVue = createLocalVue()

function createConfig (overrides) {
  let vuetify = new Vuetify()
  const config = {
    localVue,
    vuetify,
    mocks: {
      $translate: (msg) => msg
    },
    data: () => {
      return {
        schema: {},
        customerData: customerMock,
        groups: [
          {
            id: '111',
            name: 'Gruppe1',
            mainGroup: false
          },
          {
            id: '222',
            name: 'Gruppe2',
            mainGroup: false
          }
        ]
      }
    },
    propsData: {
      customer: customerMock,
      tabIndex: 1
    },
    sync: false
  }
  return overrides ? Object.assign(config, overrides) : config
}

describe('CustomerDetailsTabGroups.vue', () => {
  let wrapper

  beforeEach(() => {
    wrapper = shallowMount(CustomerDetailsTabGroups, createConfig(null))
  })

  afterEach(() => {
    wrapper.destroy()
    wrapper = null
  })

  test('renders correctly', () => {
    expect(wrapper.element).toMatchSnapshot()
  })

  test('watcher assign customer to customerData', async () => {
    wrapper = shallowMount(CustomerDetailsTabGroups, createConfig({
      propsData: {
        customer: { id: 'test' },
        tabIndex: 1
      }
    }))
    await wrapper.vm.$nextTick()
    expect(wrapper.vm.$data.customerData.id).toEqual('test')
  })

  test('addGroupToCustomer adds group to customer.customerGroups, sets mainGroup if no other mainGroup present and ' +
    'removes group from groups', () => {
    wrapper.vm.$data.customerData.customerGroups[0].mainGroup = false
    const castedWrapper = wrapper.vm as any
    castedWrapper.addGroupToCustomer(wrapper.vm.$data.groups[0])
    expect(wrapper.vm.$data.customerData.customerGroups.length).toEqual(2)
    expect(wrapper.vm.$data.customerData.customerGroups[1].mainGroup).toBeTruthy()
    expect(wrapper.vm.$data.groups.length).toEqual(1)
  })

  test('removeGroupFromCustomer removes group from customer.customerGroups, sets first customerGroup.mainGroup ' +
    'true if no other mainGroup present and adds group to groups', async () => {
    await localVue.nextTick()
    const castedWrapper = wrapper.vm as any
    castedWrapper.addGroupToCustomer(wrapper.vm.$data.groups[0])
    expect(wrapper.vm.$data.groups.length).toEqual(1)
    expect(wrapper.vm.$data.customerData.customerGroups.length).toEqual(2)
    castedWrapper.removeGroupFromCustomer(wrapper.vm.$data.customerData.customerGroups[0])
    expect(wrapper.vm.$data.customerData.customerGroups.length).toEqual(1)
    expect(wrapper.vm.$data.customerData.customerGroups[0].mainGroup).toBeTruthy()
    expect(wrapper.vm.$data.groups.length).toEqual(2)
  })
})

这就是我尝试测试的组件：

import Vue from 'vue'
import customerMixin from '@/modules/customer/mixins/customerMixin'
import { Customer, CustomerGroup } from '@/modules/customer/type/types'
import {
  QUERY_CUSTOMER_GROUPS,
  QUERY_CUSTOMER_GROUPS_BY_ID
} from '@/modules/customer/graphql/queries'
import OverflowTooltip from '@/components/OverflowTooltip.vue'
import Event from '@/enum/event'

export default Vue.extend({
  name: 'CustomerDetailsTabData',
  mixins: [customerMixin],
  components: {
    OverflowTooltip
  },
  props: {
    customer: {
      type: Object,
      required: true
    },
    tabIndex: {
      type: Number,
      required: true
    }
  },

  data: function () {
    return {
      customerData: { customerGroups: [] } as Customer,
      groups: {}
    }
  },

  watch: {
    customer: {
      immediate: true,
      handler (customer: Customer): void {
        this.customerData = customer
        if (!this.customerData.customerGroups) {
          this.customerData.customerGroups = []
        }
      }
    }
  },

  methods: {
    addGroupToCustomer (groupToAdd: CustomerGroup): void {
      const customerMainGroup = this.customerData.customerGroups.find(group => group.mainGroup)
      groupToAdd.mainGroup = this.customerData.customerGroups.length === 0 || !customerMainGroup
      this.$set(this.customerData.customerGroups, this.customerData.customerGroups.length, groupToAdd)
      this.groups = this.groups.filter(group => group.id !== groupToAdd.id)
    },

    removeGroupFromCustomer (groupToRemove: CustomerGroup): void {
      this.customerData.customerGroups = this.customerData.customerGroups.filter(group => group.id !== groupToRemove.id)
      if (groupToRemove.mainGroup && this.customerData.customerGroups.length > 0) {
        this.changeSelectedMainGroup(this.customerData.customerGroups[0])
        groupToRemove.mainGroup = false
      }
      this.$set(this.groups, this.groups.length, groupToRemove)
      this.groups.sort((group1, group2) => group1.id - group2.id)
    },

    changeSelectedMainGroup (clickedGroup: CustomerGroup): void {
      this.customerData.customerGroups.forEach(group => {
        group.mainGroup = group.id === clickedGroup.id
      })
    }
  }
})

无论我尝试什么，测试 4 都失败了，因为它包含以前测试的组。认为 wrapper.destroy() 和 wrapper = null 会删除它们之间的数据，但不起作用。 希望有任何提示。

Answer 1

天哪，对于面临同样问题的每个人，我找到了我的问题。并不是每次都使用新数据重新创建包装器。那行得通。我的问题是，我直接将我的模拟绑定到测试并且他们改变了模拟本身，所以在每次测试之后模拟都有不同的数据。 对我来说 JSON.parse(JSON.stringify(mock))) 模拟成功了。