web-dev-qa-db-ja.com

vue-test-utilボタンのクリックトリガーが起動しない

Vueボタン付きのコンポーネントがあります。ボタンをクリックすると、メソッドが呼び出されます。単体テストにJestを使用しています。_.trigger_から_vue-test-utils_メソッドを期待していました。ボタンに合成イベントを作成しますが、何もしません。

wrapper.vm.addService()を呼び出してからconsole.log(wrapper.emitted())を使用して、ラッパーでメソッドを直接呼び出してみましたが、実際にイベントがトリガーされたことがわかります。だから私の質問は、なぜaddServiceBtn.trigger('click')が何もしないのかということです。

console.log(wrapper.emitted())は空のオブジェクトです。テスト結果は次のエラーメッセージで失敗します：_Expected spy to have been called, but it was not called._

ServiceItem.vue

_<template>
  <v-flex xs2>
    <v-card>
      <v-card-text id="itemTitle">{{ item.title }}</v-card-text>
      <v-card-actions>
        <v-btn flat color="green" id="addServiceBtn" @click="this.addService">Add</v-btn>
      </v-card-actions>
    </v-card>
  </v-flex>
</template>

<script>
export default {
  data: () => ({
    title: ''
  }),
  props: {
    item: Object
  },
  methods: {
    addService: function (event) {
      console.log('service item')
      this.$emit('add-service')
    }
  }
}
</script>
_

tests.spec.js

_import { shallowMount, mount } from '@vue/test-utils'
import ServiceItem from '@/components/ServiceItem.vue'
import Vue from 'vue';
import Vuetify from 'vuetify';

Vue.use(Vuetify);

describe('ServiceItem.vue', () => {
  it('emits add-service when Add button is clicked', () => {
    const item = {
      title: 'Service'
    }

    const wrapper = mount(ServiceItem, {
      propsData: { item }
    })

    expect(wrapper.find('#addServiceBtn').exists()).toBe(true)
    const addServiceBtn = wrapper.find('#addServiceBtn')

    const spy = spyOn(wrapper.vm, 'addService')

    console.log(wrapper.emitted())
    addServiceBtn.trigger('click')
    expect(wrapper.vm.addService).toBeCalled()

  })
})
_
javascriptvue.jsjestjsvuetify.jsvue-test-utils
4
Payam Mesgari

HTMLコードに少し間違いがありました。あなたのバインド@clickthisなしのメソッドへのイベント。成功する：

 <v-btn flat color="green" id="addServiceBtn" @click="addService($event)">Add</v-btn>
4
Efrat Levitan

私にはそれは機能しませんでしたが、。nativeを追加するまで、vue-test-utilsでテストするとイベントの発生に失敗しました

<v-btn @click.native="addToCart($event)">
      Add
</v-btn>
1
Despertaweb

それが機能しなかった理由は、_this.addService_の_<template>_がthisを削除し、@click="addService($event)"または_@click="addService"_のみを言うことをお勧めしているためです。正常に動作しますが、イベントが渡されません

0
McWally