title: vue-test-utils - how to handle $refs?
body: <p><strong>THE SITUATION</strong></p>
  
  <p>I am trying to <code>shallowMount</code> a component, unsuccessfully. </p>
  
  <p>The component makes use of <code>$refs</code> to read the height of a <code>div</code>. That value is read inside a computed property. Then in the <code>mounted</code> lifecycle I save that value in the store.</p>
  
  <p>The logic itself is simple and works fine. But <strong>in the test suite, the mounting of the component breaks, because the <code>$refs</code> key is <code>undefined</code>.</strong></p>
  
  <p>To be clear: I don't intend to test the <code>$refs</code>, I just need to mount the component and move on doing actual unit-testing.</p>
  
  <p><strong>THE COMPONENT</strong></p>
  
  <p>This is the markup:</p>
  
  <pre><code>&lt;div ref="tgmp"&gt;
  </code></pre>
  
  <p>I save the height of the div in a computed property:</p>
  
  <pre><code>computed: {
    barH() {
      return this.$refs.tgmp.clientHeight
    }
  }
  </code></pre>
  
  <p>And then, in the mounted lifecycle, I commit the value in the store:</p>
  
  <pre><code>this.$store.commit('setBarHeight', this.barH)
  </code></pre>
  
  <p><strong>THE TEST</strong></p>
  
  <p>This is the test. I have omitted irrelevant stuff, like installing the store in the localVue.</p>
  
  <pre><code>beforeEach(() =&gt; {
    wrapper = shallowMount(Bar, {
      store,
    })
  })
  
  test('is a Vue instance', () =&gt; {
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
  </code></pre>
  
  <p><strong>THE ERROR</strong></p>
  
  <pre><code>Error in mounted hook: "TypeError: Cannot read property 'clientHeight' of undefined"
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/BcoPQ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/BcoPQ.png" alt="TypeError: Cannot read property &#39;clientHeight&#39; of undefined"></a></p>
  
  <p><strong>ATTEMPT</strong></p>
  
  <p>I have been trying searching anywhere for a solution, but couldn't find it.
  I have tried to mock the $refs, but without success:</p>
  
  <pre><code>wrapper = shallowMount(ThePlayerBar, {
    store,
    mocks: {
      $refs: {
        tgmp: {
          clientHeight: 600
        }
      }
    }
  })
  </code></pre>
  
  <p><strong>THE QUESTION</strong></p>
  
  <p>How can I mount a component that makes us of <code>$refs</code> in the <code>mounted</code> lifecycle?</p>