title: Should I test Vue.js private functions?
body: <p>So after I read <a href="https://vue-test-utils.vuejs.org/guides/common-tips.html" rel="nofollow noreferrer">common tips</a> and watched <a href="https://www.youtube.com/watch?v=OIpfWTThrK8" rel="nofollow noreferrer">the video about testing</a> provided by Vue.js I decided to test only behaviors of my components. But I maybe misunderstand the concept. Here is the component:</p>
  
  <pre class="lang-vue prettyprint-override"><code>&lt;template&gt;
          &lt;es-btn
            class="a"
            round
            outline
            color="primary"
            @click="skipScan"
          &gt;
            Skip Upload
          &lt;/es-btn&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    data: () =&gt; ({
      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;
  }
  
  ....
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I want to test the behavior:</p>
  
  
  
  <pre><code>it('should hide itself and show next dialog when Scan Button is clicked', () =&gt; {
      const data = {
        uploadScanningDialog: true,
      };
      wrapper.setData(data);
  
      expect(wrapper.vm.uploadScanningDialog).toBeTruthy();
      wrapper.find('.a').trigger('click');
      expect(wrapper.vm.uploadScanningDialog).toBeFalsy();
    });
  </code></pre>
  
  <p>So here are the questions and errors:</p>
  
  <ol>
  <li><p>Should I do test this way, by triggering the action instead of calling the method itself? Because I used to test by calling the method and expecting some results, not triggering the component who calls the method</p></li>
  <li><p>Shouldn't I test the private functions? Because my test tries to call real method, so the test I share gets error. I will mock them but I'm not sure how to continue</p></li>
  </ol>