正确测试 Vue 组件中的事件处理程序

Question

我有一个带有锚标记和关联处理程序 onSelectLink() 的组件。

<a
  :href="$t('footer.termsUrl')"
  target="_blank"
  name="termsAndConditions"
  @click="onSelectLink($event.target.name)">{{ $t('terms') }}</a>

onSelectLink() 函数...

onSelectLink (buttonName) {
      buttonName === 'termsAndConditions'
        ? this.logButtonClick(ANALYTICS.TERMS_AND_CONDITIONS)
        : this.logButtonClick(ANALYTICS.PRIVACY_POLICY)
    }

我的单元测试

describe('onSelectLink()', () => {
    it('[positive] should track analytics when user selects `Terms and Conditions` link', () => {
      const buttonName = 'termsAndConditions'
      jest.spyOn(wrapper.vm, 'onSelectLink')

      wrapper.find('a').trigger('click')
      wrapper.vm.onSelectLink(buttonName)

      expect(wrapper.vm.logButtonClick).toHaveBeenCalledWith(ANALYTICS.TERMS_AND_CONDITIONS)
    })

    it('[positive] should track analytics when user selects `Privacy Policy` link', () => {
      const buttonName = 'privacyPolicy'
      jest.spyOn(wrapper.vm, 'onSelectLink')

      wrapper.find('a').trigger('click')
      wrapper.vm.onSelectLink(buttonName)

      expect(wrapper.vm.logButtonClick).toHaveBeenCalledWith(ANALYTICS.PRIVACY_POLICY)
    })

我的问题是：

这些测试是否每个调用 onSelectLink() 两次？
我真的需要使用 "wrapper.find('a').trigger('click')"
这是 good/robust 测试以确保使用正确的参数调用 onSelectLink() 吗？

当我注释掉 "wrapper.find('a').trigger('click')" 时，测试似乎仍然通过。我以为我必须触发 DOM 事件，然后调用处理程序。

Answer 1

您目前在每个测试中触发了 onSelectLink 两次。

曾经

wrapper.find('a').trigger('click') // normal flow

还有一次

wrapper.vm.onSelectLink(buttonName) // you run `onSelectionLink` directly on vm

第二个原则上是错误的。您不想通过直接在 vm 上调用它来触发该方法，因为您的用户不能那样做。
他们可以做到的唯一方法是单击 link，这就是您应该测试的内容。

const logger = jest.spyOn(wrapper.vm, 'logButtonClick')
expect(logger).not.toHaveBeenCalled();
wrapper.find('a[name="termsAndConditions"]').trigger('click')
expect(logger).toHaveBeenCalledWith(ANALYTICS.TERMS_AND_CONDITIONS);

请记住，您始终可以在测试中使用 console.log()，您将在 CLI 中看到记录的值并弄清楚发生了什么。

正确测试 Vue 组件中的事件处理程序

Correctly testing an event handler in Vue component

javascript

vue.js

jestjs

vue-test-utils