Vue Testing Child Component Button Click from Parent Component

Question

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

the button is a child component that accept props such as disabled, function and text

The parent called the button component and it was disabled if the checkbox value is false

Child

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

Parent

 <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')
}

The Unit test

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')
 })
})

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

the console.log childComponent just log an empty wrapper

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

I'm not sure the router actually works on a test. You should mock `push` of `$router` and check if it was called with the desired param. The `click` should trigger. It's also possible it works on `$nextTick`: `return wrapper.vm.$nextTick(() => { expect(router...).toBe('/another-page')})` — tao, Feb 12 '19 at 08:49
Possible duplicate of [Vue test-utils how to test a router.push()](https://stackoverflow.com/questions/53302536/vue-test-utils-how-to-test-a-router-push) — tao, Feb 12 '19 at 08:49
the router works perfectly just like I said, if I use normal button instead of the button component the test will work the expect router path will be /another-page — Andrew, Feb 12 '19 at 08:52
In that case `$nextTick()` will help. I've updated my comment above. — tao, Feb 12 '19 at 08:52
my problem is not the routes not changing but the button is not triggering the click function — Andrew, Feb 12 '19 at 08:57
You're right. Your find is wrong. The selector is supposed to be a string. `wrapper.find('Button')` should work. Otherwise it evaulates to `wrapper.find(undefined)`. Have a good day :) — tao, Feb 12 '19 at 08:59
In cases like this either `console.log()` or `expect()` are your friends. A very good idea is to do `expect(component.exists()).toBe(true)` after every `find`. That's what I do. You can have multiple `expect()`s into one test. If you need to wait for the app to parse, return `wapper.vm.$nextTick().then(() => { /*more expects*/ })` — tao, Feb 12 '19 at 09:08

Vue Testing Child Component Button Click from Parent Component

0 Answers0