title: Find a data-attribute in test with Vue.js
body: <p>Trying to figure out with shallowMount how I can find a data attribute and check if that attribute is there in the Vue template:</p>
  
  <p><strong>myVue.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div data-test="apple"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  export default {
      name: "fruit-main",
      extends: registerStore(),
      components: {
  
      },
      props: {
  
      },
      data() {
  
      },
      mounted() {
  
      },
      computed: {
  
      },
      methods: {
  
      },
      watch: {
  
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>spec.js</strong> (using Vue Test Utils and mocha):</p>
  
  <pre><code>it('shows an apple', () =&gt; {
    let fakeStore = new Vuex.Store({ state: {} });
    const apple = shallowMount(myVue, {fakeStore}),
  
    expect(apple).to.have.length(1);
  });
  </code></pre>
  
  <p><strong>OR maybe this way???</strong></p>
  
  <p><strong>myVue.vue</strong></p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div apple&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>spec.js</strong></p>
  
  <pre><code>it('shows an apple', () =&gt; {
    const vue = shallowMount(myVue),
      apple = vue.element.getAttribute('apple')
  
    expect(apple).to.exist
  // or expect(apple).to.have.length(1); - which is how you'd do it with enzyme but I'm not sure yet what getAttribute returns yet
  });
  </code></pre>
  
  <p>but I'm not sure how to go about it, obviously this is not right.  I'm an enzyme and React guy trying to figure out how to do the same kinds of tests with Vue basically.</p>
  
  <p><strong>Note</strong>: I use shallowMount solely for TDD I am not interested in mount() and I'm not about to debate that right now for this post.  I'm just asking help for shallowMount here and how to find a a data-attribute for my tests to assert on.</p>