javascript - 我应该测试 Vue.js 私有(private)函数吗？

Question

所以在我读完common tips之后并观看了the video about testing由 Vue.js 提供 我决定只测试我的组件的行为。但我可能误解了这个概念。这是组件:

<template>
        <es-btn
          class="a"
          round
          outline
          color="primary"
          @click="skipScan"
        >
          Skip Upload
        </es-btn>
</template>
<script>
export default {
  data: () => ({
    uploadScanningDialog: false,
  }),

  methods: {
// public functions here which will be tested

    skipScan() {
      hideDialog();
      triggerSkipScan();
    },
  },
}

// private functions here as vue.js suggests

function hideDialog() {
  this.uploadScanningDialog = false;
}

....

</script>

我想测试行为:

it('should hide itself and show next dialog when Scan Button is clicked', () => {
    const data = {
      uploadScanningDialog: true,
    };
    wrapper.setData(data);

    expect(wrapper.vm.uploadScanningDialog).toBeTruthy();
    wrapper.find('.a').trigger('click');
    expect(wrapper.vm.uploadScanningDialog).toBeFalsy();
  });

下面是问题和错误:

1. 我应该通过触发操作而不是调用方法本身来以这种方式进行测试吗？因为我以前是通过调用方法来测试，并期待一些结果，而不是触发调用方法的组件

2. 我不应该测试私有(private)函数吗？因为我的测试试图调用真正的方法，所以我分享的测试会出错。我会 mock 他们，但我不确定如何继续

Answer 1

通常，如果可能，最好通过其公共(public) API 对您的代码进行单元测试。

这提高了可维护性，因为:

• 它允许您重构任何私有(private)函数，而无需更新您的单元测试。
• 如果您对私有(private)函数进行了更改，则可以通过针对公共(public) API 运行单元测试来断言您没有破坏任何东西。

是通过调用公共(public)方法还是触发 DOM 事件来运行单元测试是一个选择问题。

后者提供了更大的测试覆盖率，因为您也在测试您是否已在模板中正确地将事件连接到事件处理函数；但它的可维护性稍差，就像您更改模板一样，您可能必须更新测试。