时间戳

首页 > 解决方案 > 如何使 vuetify v-btn 元素成为点击事件

javascript - 如何使 vuetify v-btn 元素成为点击事件

问题描述

我有这个 vuetify 按钮


 <v-btn
  @click="resetQuiz"
 >
    Click to Start
 </v-btn>

我正在测试按钮单击时的单击事件

  it(`should trigger an event when the 'click to start' button is clicked`, () => {
    const event = jest.fn()
    const button = wrapper.findComponent({ name: 'v-btn' })
    expect(button.exists()).toBe(true);

    expect(button.text()).toBe('Click to Start')
    console.log(button);
    
    button.vm.$emit('click')
    expect(event).toHaveBeenCalledTimes(0)

    button.trigger('click')
    expect(event).toHaveBeenCalledTimes(1)
  })

显然，当我记录按钮时没有发出任何事件，这就是我得到的。

VueWrapper {
      isFunctionalComponent: undefined,
      _emitted: [Object: null prototype] {},
      _emittedByOrder: [],
      selector: { name: 'v-btn' }
    }

这行测试expect(event).toHaveBeenCalledTimes(1)失败。我已经尝试过<v-btn @click="resetQuiz()">, <v-btn @click.native="resetQuiz">和 @click.native="resetQuiz()">

这是我的方法

methods: {
    resetQuiz () {
      window.location.reload()
    }
  }

标签： javascriptjestjsvuetify.js

解决方案

你能提供一个工作演示吗？你给出的例子似乎工作得很好。我根本没有得到这个it()功能。

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<div id="app">
  <v-app>
    <v-main>
      <v-container>App
        <v-btn @click="resetQuiz">
          Click to Start
        </v-btn>
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
  new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    methods: {
      resetQuiz() {
        console.log('RESET');
        //window.location.reload()
      }
    }
  })
</script>

推荐阅读