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'）”
这是一个很好的/稳健的测试，以确保使用正确的参数调用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中看到记录的值并弄清楚发生了什么。

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

1 个答案: