仅当使用括号调用函数时，Vue 模板中的函数调用测试才会通过

我将 Vue v2.6 与 Jest (v24.9) 和 Vue-Test-Utils (v1.03) 一起使用。

为了模拟一个方法，我看到了两种不同的语法，

wrapper.vm.updateCart = jest.fn();

and

wrapper.setMethods({ updateCart: jest.fn() });

但第一个没有记录，而第二个已被弃用（请参阅docs).

问题是，使用这两种方法，测试通过的唯一方法是在模板内调用带有括号的方法，这很奇怪，因为我读过的所有文档都以某种方式鼓励使用模板中不带括号的方法。

所以这个测试：

test('Click on .btn calls the right function', () => {
    const wrapper = shallowMount(Modal, {
        propsData: {
            validate: jest.fn(),
        },
    });
    wrapper.setMethods({ updateCart: jest.fn() });
    const $btn = wrapper.find('.btn');
    $btn.trigger('click');
    expect(wrapper.vm.updateCart).toHaveBeenCalled();
});

仅当我用括号调用该方法时才会通过：

<button class="btn" @click="updateCart()">
  {{ dictionary('remove') }}
</button>

但否则会失败（例如使用@click="updateCart").

测试模板中的事件是否正在调用函数的正确语法是什么？

以及为什么文档中出现弃用警告（here and here）定义setMethodapi 作为反模式？

也许只测试模板中的事件触发函数是错误的，因为这种行为应该已经由框架（Vue）保证，而我们应该只专注于测试函数本身？

编辑 07/02/2020

我还尝试了不同的语法：

const spy = jest.spyOn(wrapper.vm, 'updateCart');
const $btn = wrapper.find('.btn');
$btn.trigger('click');
expect(spy).toHaveBeenCalled();

这可以防止覆盖该方法并替换对setMethods，但测试仍然仅在使用括号调用函数时通过。

Both @click="updateCart" and @click="updateCart()"支持语法变体，这很令人困惑，因为 Vue DSL 允许在以下位置提供表达式v-on。前者使用updateCart方法作为事件处理程序，而后者根据组件实例计算表达式，并且不限于方法。

@click="updateCart()"出于一致性原因，更可取，因为表达式通常在 Vue 模板中使用，也@click="notAFunction"默默地失败了@click="notAFunction()"抛出错误。这也允许通过以下方式监视它：

jest.spyOn(wrapper.vm, 'updateCart');

否则，需要在组件实例化之前监视该方法：

jest.spyOn(Modal.methods, 'updateCart');
const wrapper = shallowMount(Modal);

的弃用setMethod已解释：

没有明确的路径来替换 setMethods，因为它确实取决于 根据您之前的使用情况。它很容易导致依赖于的片状测试 实施细节，这是不鼓励的。

...

要存根复杂的方法，请将其从组件中提取出来并在其中进行测试 隔离。要断言调用了方法，请使用测试运行程序 监视它。

对测试实施的担忧是主观的，因为这通常不是一件坏事。提取是否实用取决于具体情况，因为一个函数需要提取到另一个模块才能被监视。

As for updateCart，模拟更新汽车的底层 API 可能就足够了，而不是方法本身。

使用存根方法测试点击事件仍然可能有用，或者至少监视真实的方法。以这种方式测试的是模板，而不仅仅是框架的行为。如果没有间谍，测试失败是否是未知的btn or updateCart.