vue 组件单元测试

组件单元测试 可以阅读Vue Test Utils

vue组件单元测试，就是测试组件里面的props的属性，测试一个属性，先赋值，然后写一个预期的结果。

下面是vue3 代码示例： 就是需要测试type、dark、 light 、closable，

 测试的代码如下：

    expect(type.find('.lu-tag-info').exists()).toBe(true) 表示一个预期的结果，find('.lu-tag-info') 表示寻找lu-tag-info的类，exists（）存在，toBe(true)预期结果表示有。预期结果可以通过产看官网去了解有那些测试的类型。

import Tag from '@/components/tag/src/main.vue'
import { mount } from '@vue/test-utils'

describe('tag', () => {
  test('optional value', async () => {
    const type = mount(Tag, {
      props: {
        type: 'info'
      }
    })
    expect(type.find('.lu-tag-info').exists()).toBe(true)
  })

  test('dark', async () => {
    const wrapper = mount(Tag, {
      props: {
        dark: true,
        type: 'info'
      }
    })
    expect(wrapper.find('.lu-tag-dark-info').exists()).toBe(true)
  })

  test('closable', async () => {
    const wrapper = mount(Tag, {
      props: {
        closable: true
      }
    })
    expect(wrapper.find('.lu-tag-close').exists()).toBe(true)
  })
})