Question

我正在尝试对我的Vue页面进行单元测试，但是我陷于按钮触发测试中。父级无法触发点击功能

按钮是一个子组件，可以接受诸如禁用，功能和文本之类的道具

父级调用了按钮组件，并且如果复选框的值为false，则该父级被禁用

孩子

<div>
 <b-button
 :disabled= disabled
 class="myButton"
 @click="function"
   {{text}}
 </b-button>
</div>

父母

 <div>
  <input v-model="check" type="checkbox" value="Ok">Agree
  <div class="button-verification">
   <Button
     :disabled= !check
     :text= "'Ok'"
     :function= buttonFunction
    />
  </div>
 </div>

buttonFunction() {
 router.push('/another-page')
}

单元测试

import { mount, createLocalVue } from '@vue/test-utils'
import BootstrapVue from 'bootstrap-vue'
import Parent from '@/view/parent'
import Button from '@/component/child'

const localVue = createLocalVue()
localVue.use(BootstrapVue)

describe('test parent', () => {
  it('Trigger button correctly', function () {
   const wrapper = mount(Parent, {
    localVue
  })
  wrapper.setData({ check: true })
  const childComponent = wrapper.find(Button)
  console.log('child', childComponent)
  childComponent.trigger('click')
  expect(router.history.current.path).toBe('/another-page')
 })
})

如果我使用普通按钮，则测试将成功，但是我将按钮组件设为可重用，因此我需要使用按钮组件来测试点击功能

console.log childComponent只是记录一个空包装器

VueWrapper {
  isFunctionalComponent: undefined,
  _emitted: {},
  _emittedByOrder: [] }

Vue测试子组件按钮从父组件单击

0 个答案: