Question

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

我需要测试是否在单击我的按钮时调用了一个方法，问题是，当我在没有paratheses的情况下将我的方法放在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
期望（jest.fn（））。toHaveBeenCalled（）

已调用预期的模拟函数。

如果我这样说：

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

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

Answer 1

在Vue中，您可以使用event modifiers进行v-on来实施e.preventDefault()：

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

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

1 个答案: