title: Vue Testing Child Component Button Click from Parent Component
body: <p>I'm trying to make a unit test for my vue page but I was stucked in a button trigger test.
  The parent cannot trigger the click function</p>
  
  <p>the button is a child component that accept props such as disabled, function and text</p>
  
  <p>The parent called the button component and it was disabled if the checkbox value is false</p>
  
  <p>Child </p>
  
  <pre><code>&lt;div&gt;
   &lt;b-button
   :disabled= disabled
   class="myButton"
   @click="function"
     {{text}}
   &lt;/b-button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Parent</p>
  
  <pre><code> &lt;div&gt;
    &lt;input v-model="check" type="checkbox" value="Ok"&gt;Agree
    &lt;div class="button-verification"&gt;
     &lt;Button
       :disabled= !check
       :text= "'Ok'"
       :function= buttonFunction
      /&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
  buttonFunction() {
   router.push('/another-page')
  }
  </code></pre>
  
  <p>The Unit test</p>
  
  <pre><code>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', () =&gt; {
    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')
   })
  })
  </code></pre>
  
  <p>If I used a normal button, the test will be successful, but I made the button component to be reusable so I need to test the click function using the button component</p>
  
  <p>the console.log childComponent just log an empty wrapper</p>
  
  <pre><code>VueWrapper {
    isFunctionalComponent: undefined,
    _emitted: {},
    _emittedByOrder: [] }
  </code></pre>