Question

在阅读了很多stackoverflow和github讨论之后，有关vue开玩笑的button.trigger（'click'）遇到了麻烦。今天，我在这个问题上苦苦挣扎了几个小时，不得不说让我感到非常沮丧，并且感到惊讶的是，像trigger（'click'）之类的简单函数如何会引起如此多的问题。

简而言之，我的代码有一个b按钮，通过@click可以从vuex中触发fetchData函数。这在浏览器中可以很好地工作，但是在测试模式下，不会执行fetchData。

Vue组件代码

<template>
  <b-button id="loadButton" variant="outline-primary" @click="fetchData">Load Data</b-button>
</template>

<script>
import { mapActions } from 'vuex';
export default {
    name: "LoadAndSave",
    methods: { ...mapActions(['fetchData']) }
}
</script>

测试代码

import { shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import { BootstrapVue } from 'bootstrap-vue'
import LoadAndSave from '../../resources/components/LoadAndSave'

const localVue = createLocalVue()
localVue.use(BootstrapVue)
localVue.use(Vuex)

describe('LoadAndSave.vue', () => {
  let actions
  let getters
  let store

  beforeEach(() => {
    actions = {
      fetchData: jest.fn()
    }
    store = new Vuex.Store({
      actions
    })
  })
  it('LoadAndSave: onClick executes fetchData', async () => {
    const wrapper = shallowMount(LoadAndSave, { localVue, store })
    const button = wrapper.find("#loadButton")
    await button.trigger('click')
    expect(actions.fetchData).toHaveBeenCalled()
  })
})

测试结果

expect(jest.fn()).toHaveBeenCalled()

Expected number of calls: >= 1
Received number of calls:    0

这不是我的第一天编码，我也不是编码专家，但是只是无法单击按钮来触发触发的想法确实使我不寒而栗，更不用说伴随着挫折了

如果有人可以提出任何建议，谢谢。

代码

Answer 1

我也一直在为此苦苦挣扎，似乎有时测试组件很难找到没有括号的函数的发出/调用。

it('Calls save() when pressing save button', async () => {
  const savebutton = wrapper.find('#saveButton')
  const spy = jest.spyOn(wrapper.vm, 'save')
  savebutton.trigger('click')
  await wrapper.vm.$nextTick()
  expect(spy).toHaveBeenCalled()
  jest.restoreAllMocks()
)}

以上测试将在此处失败：

<button class="btn btn-success" id="saveButton" @click="save">Save</button>

但不在这里：

<button class="btn btn-success" id="saveButton" @click="save()">Spara</button>

您可以至少检查这是否是问题所在，在方法中引用store函数，然后在元素上带有括号的情况下调用该函数。

另一种断言已单击按钮的方法是查看发射的对象。

it('Calls save() when pressing save button', () => {
  const savebutton = wrapper.find('#saveButton')
  savebutton.trigger('click')
  expect(wrapper.emitted('save')).toHaveLength(1)
})

Vue测试（JEST）：button.trigger（'click'）不起作用

1 个答案: