javascript - Vue 模板中的函数调用测试仅在使用括号调用函数时通过

问题描述

我正在使用带有 Jest (v24.9) 和 Vue-Test-Utils (v1.03) 的 Vue v2.6。

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

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

和

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

但第一个没有记录，而第二个已弃用（请参阅文档）。

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

所以这个测试：

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"）。

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

以及为什么文档（此处和此处）中的弃用警告将setMethodapi 定义为反模式？

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

编辑 07/02/2020

我也尝试了不同的语法：

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

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

标签： javascriptvue.jsjestjsvue-test-utils

解决方案

两者@click="updateCart"和@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 没有明确的路径，因为它确实取决于您以前的使用情况。它很容易导致依赖于实现细节的不稳定测试，这是不鼓励的。

...

要存根一个复杂的方法，从组件中提取它并单独测试它。要断言调用了某个方法，请使用您的测试运行程序来监视它。

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

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

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

javascript - Vue 模板中的函数调用测试仅在使用括号调用函数时通过

问题描述

解决方案

推荐阅读