vue单元测试

 

0、测试钩子函数

describe的钩子函数
在测试块describe中，存在这四个钩子函数，他会在describe执行的不同时期调用：

before()：在该区块的所有测试用例之前执行

after()：在该区块的所有测试用例之后执行

beforeEach()：在每个单元测试(即it)执行前执行

afterEach()：在每个单元测试(即it)执行后执行

 

1、 加载对象

    const wrapper = mount(UserManageXG);

    const wrapper = shallowMount(UserManageXG, {
      propsData: { value }
    })

2、设置属性

  it('prop isActive', () => {
    const wrapper = shallowMount(Hamburger)
    wrapper.setProps({ isActive: true })
    expect(wrapper.contains('.is-active')).toBe(true)
    wrapper.setProps({ isActive: false })
    expect(wrapper.contains('.is-active')).toBe(false)
  })

3、异步测试代码

await wrapper.vm.$nextTick()

it('updates text', async () => {
  const wrapper = mount(Component)
  await wrapper.trigger('click')
  expect(wrapper.text()).toContain('updated')
  await wrapper.trigger('click')
  wrapper.text().toContain('some different text')
})

// 或者你不希望使用 async/await
it('render text', done => {
  const wrapper = mount(TestComponent)
  wrapper.trigger('click').then(() => {
    wrapper.text().toContain('updated')
    wrapper.trigger('click').then(() => {
      wrapper.text().toContain('some different text')
      done()
    })
  })
})

4、判断属性是否相等

const wrapper = mount(input, {
      propsData: {
        type: 'password',
        value: 'admin'
      }
    })
expect(wrapper.props('value')).toBe('admin')



// 挂载元素并返回已渲染的组件的工具函数
function getMountedComponent(Component, propsData) {
  return shallowMount(Component, {
    propsData
  })
}

 

5、查询组件

    const querybtn = wrapper.findComponent({ ref: 'queryBtn' });