小编Gio*_*sta的帖子

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

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

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

我还尝试了不同的语法： …

<script
  id="ze-snippet"
  src="https://static.zdassets.com/ekr/snippet.js?key=some_zendesk_key"
/>

我正在尝试优化我的网站性能。我已经面临第三方代码对我的性能的巨大影响，我认为我的所有包的大小都比 zendesk 代码小。如何在不影响主线程的情况下加载它？我应该使用asyncordefer标签吗？或者哪种方法更适合这种情况？