在 VUEJS 2 中没有括号的测试不起作用

Posted 2023-02-22

【中文标题】在 VUEJS 2 中没有括号的测试不起作用

【英文标题】：Test not work without parentheses in VUEJS 2

【发布时间】：2018-06-03 01:59:34

【问题描述】：

我使用 Jest 对 VueJS 2 应用程序进行测试。

我需要测试单击按钮时是否调用了方法，问题是，当我将方法放入click 时不带括号，在我的测试中没有调用他。

ButtonAnchor.vue

<template>
 <div>
  <a v-on:click="triggerAnchor"> text </a>
 </div>
</template>

<script>
  [...]
  methods: 
   triggerAnchor(event)  ... 
  ,
</script>

BaseAnchor.spec.js

import  mount  from 'vue-test-utils';
import BaseAnchor from '@/components/BaseAnchor';

[...]

it('should called `triggerAnchor` when clicked button', () => 
  const vm = mount(BaseAnchor).vm;
  const buttonLink = vm.$el.querySelector('a');
  const spy = jest.spyOn(vm, 'triggerAnchor');

  buttonLink.click();
  expect(spy).toHaveBeenCalled();
);

结果笑话测试

● BaseAnchor › triggerAnchor › 应该在点击按钮时调用triggerAnchor

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

预期的模拟函数已被调用。

如果我这样说：

<template>
  <div>
    <a v-on:click="triggerAnchor()"> text </a> // Add parentheses
  </div>
</template>

它有效，但我丢失了我的事件参数，所以我的 event.preventDefault() 未定义。

【参考方案1】：

在Vue中你可以使用event modifiers for v-on来实现e.preventDefault()：

<a v-on:click.stop.prevent="triggerAnchor()"> text </a>