The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

564890 (5) [Avatar] Offline
#1
I'm trying to test a button component from Vuetify.

<template>
  <div>
    <p>{{ count }}</p>
    <v-btn @click="count++">Increment count</v-btn>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0
      }
    }
  }
</script>
```




When I click the button in the browser, it behaves as expected, updating the count. However, I can't find a way to stub out the v-btn in my unit test:

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuetify from 'vuetify'

import ButtonPractice from '../ButtonPractice.vue'

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

describe('ButtonPractice.vue', () => {
  test('button increments count on click', () => {
    const wrapper = shallowMount(ButtonPractice, {
      localVue,
      stubs: {
        'v-btn': '<button />'
      }
    })
    expect(wrapper.vm.count).toBe(0)
    wrapper.find('button').trigger('click')
    expect(wrapper.vm.count).toBe(1) // expects(0) to be (1)
  })
})


I've also found this same problem when testing input tags from a Vue Component library. It seems like triggering an event on the stub doesn't affect the component's state. Has anyone encountered this problem when testing external Vue component libraries too?