Javascript 如何使vuetify v-btn元素成为单击事件

我有这个vuetify按钮

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

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

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

这行测试

expect（event）.toHaveBeenCalledTimes（1）

失败。 我试过

，

，以及

@click.native=“resetquick（）”>

这是我的方法

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

---

你能提供一个有效的演示吗？你举的例子似乎效果不错。我根本不懂

it（）

函数

应用程序
点击开始
新Vue({
el:“#应用程序”，
vuetify:新的vuetify（），
方法：{
重置测验（）{
console.log（'RESET'）；
//window.location.reload（）
}
}
})

因此，我在研究了多个资源后找到了修复方法

首先，我用

shallowMount

而不是

mount

进行测试

mount

允许您检索包装器自动记录的事件，而不像

shallowMount

那样只呈现组件的某些部分

const wrapper = mount(SomeComponent, {
    localVue,
    vuetify,
  })

其次，我遇到了一个路由器链接的问题。我从本地路由器中导入路由器

@/router

，然后将路由器添加到包装器中

const wrapper = mount(Welcome, {
    localVue,
    vuetify,
    router: router
  })

第三，jest dom在控制台上抛出了一个导航错误，因为我使用的是

window.location.reload（）

。这是我现在的方法

methods: {
    resetQuiz () {
      window.location.assign('/quiz')
    }
  }

最后，我必须将jest函数分配给window.location。这就是完整测试的样子<代码>删除窗口。位置删除任何现有位置

describe('SomeComponent.vue', () => {
  const localVue = createLocalVue()
  let vuetify

  const { location } = window

  beforeAll(() => {
    // @ts-ignore
    delete window.location

    window.location = { ...window.location, assign: jest.fn() }
  })

  afterAll(() => {
    window.location = location
  })

  beforeEach(() => {
    vuetify = new Vuetify({})
  })

  const wrapper = mount(SomeComponent, {
    localVue,
    vuetify,
    router: router
  })

  it('should trigger when the start button is clicked', () => {
    const event = window.location.assign = jest.fn()

    const button = wrapper.findComponent({ name: 'v-btn' })
    expect(button.exists()).toBe(true)

    expect(button.text()).toBe('Click to Start')

    button.trigger('click')
    expect(event).toHaveBeenCalled()
    expect(event).toBeCalledWith('/quiz')
  })
})

您可能会遇到typescript测试

窗口的问题。位置

，您需要将

节点

添加到

tsConfig

编译器选项

compilerOptions: {
...
"types": [
      ...
      "node"
],
}

---

该按钮在应用程序上运行良好，就像您的演示正在运行一样，完全符合我的要求。它只是没有通过测试，我不明白为什么。我试图测试按钮是否点击，这就是

it（）

函数应该做的。

compilerOptions: {
...
"types": [
      ...
      "node"
],
}