正确测试 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)
    })

我的问题是：

1. 这些测试是否每个都调用 onSelectLink() 两次？

2. 我真的需要使用“wrapper.find('a').trigger('click')”

3. 这是确保 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 上调用该方法来触发该方法，因为您的用户不能这样做。
他们可以做到这一点的唯一方法是点击链接，这就是你应该测试的。

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 中看到记录的值并了解发生了什么。