我应该测试vue.js私人功能

Question

因此，在阅读了通用技巧并观看了有关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. 我不应该测试私人功能吗？因为我的测试试图调用真实方法，所以我共享的测试会出错。我会嘲笑他们，但我不确定如何继续

Answer 1

通常最好通过其公共API来测试您的代码。

这可提高可维护性，为：

• 它允许您重构任何私人功能，而无需更新单元测试。
• 如果您更改私人功能，则可以断言您没有通过对公共API进行单元测试来破坏任何内容。

是否通过调用公共方法或触发DOM事件来运行单元测试是一个选择。

，如果您将事件连接到模板中的事件处理程序功能，则后者还提供了更大的测试覆盖范围；但是它的维护程度略低，好像您更改模板一样，您可能必须更新测试。