Vue测试(JEST)：button.trigger('click ')不工作

bpsygsoo 于 2023-06-20 发布在 Jest

关注(0)|答案(2)|浏览(209)

我阅读了很多stackoverflow和github上的讨论，关于vue jest在button.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

这不是我第一天编码，我也不是一个编码Maven附近的任何地方，但只是不能得到一个按钮点击触发的想法真的让我脊背发凉，更不用说伴随的挫折感了。
如果有人能给予我任何建议，我将不胜感激，谢谢。
科代

jestjs

来源：https://stackoverflow.com/questions/62828904/vue-testing-jest-button-triggerclick-not-working

2条答案

按热度按时间

6kkfgxo01#

我也一直在努力解决这个问题，似乎有时测试组件很难找到没有括号的函数的发出/调用。

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函数，并在元素上使用括号调用该函数。
Assert按钮单击已被触发的另一种方法是查看发出的对象。

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

赞(0）回复(0）举报 2023-06-20

rggaifut2#

我回到这里说，我也遇到了这个问题，解决方案是在使用shallowMount时为按钮使用stubs选项，并使用该组件查找按钮。我不需要在按钮点击添加括号。

const wrapper = shallowMount(MyComponent, {
  ...
  stubs: {
    MyButton
  },
  ...
});

test('Click Button', async () => {
  // if async method
  await wrapper.findComponent(MyButton).trigger('click');
  // if sync method - both lines
  wrapper.findComponent(MyButton).trigger('click');
  await wrapper.vm.$nextTick();
  
  expect(wrapper.vm.myMethod).toHaveBeenCalled();
});

赞(0）回复(0）举报 2023-06-20

我来回答

Vue测试(JEST)：button.trigger('click ')不工作

2条答案

相关问题

热门标签

最新问答