title: Unit Testing VueJS - Checking for an element with a certain class name
body: <p>I'm struggling to get a simple unit test working in a VueJS app.</p>
  
  <p>I'm basically trying to test the template and check if it contains a div element with a class name of "version" but the test keeps failing with an <code>undefined is not a constructor (evaluating 'expect(component.$el.querySelector('div')).to.have.className('version')').</code> error.</p>
  
  <p>It's a simple component with this as the template:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;div class="version"&gt;
              &lt;label&gt;Version {{ version }}&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="activityBanner"&gt;
              &lt;label&gt;{{ user }}&lt;/label&gt;
              &lt;router-link id="logout" :to="{name: 'logout' }"&gt;
                  &lt;label&gt;Logout&lt;/label&gt;
              &lt;/router-link&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>Here is the unit test I'm working with:</p>
  
  <pre><code>import Vue from 'vue';
  import router from '@/router';
  import VueRouter from 'vue-router';
  import Navigation from '@/components/Navigation';
  
  describe('Navigation.vue', () =&gt; {
    // Nice little helper to return our component within a div
    const getComponent = data =&gt; {
      const Constructor = Vue.extend(Navigation);
  
      return new Constructor({
        router
      }).$mount();
    };
  
    describe('Component', () =&gt; {
      it('should have a property "name"', () =&gt; expect(Navigation.name).to.be.a('string'));
  
      it('should have a property "name" set to "Navigation"', () =&gt; expect(Navigation.name).to.equal('Navigation'));
  
      it('should have a data hook', () =&gt; expect(Navigation.data).to.be.a('function'));
  
      it('should have a default "currentView" set to "profileTable"', () =&gt; {
        const defaultData = Navigation.data();
  
        expect(defaultData.currentView).to.equal('profileTable');
      });
  
      it('should have a default "version" set to "0.5"', () =&gt; {
        const defaultData = Navigation.data();
  
        expect(defaultData.version).to.equal(0.5);
      });
  
      it('should have a default "user" set to "Bob Barker"', () =&gt; {
        const defaultData = Navigation.data();
  
        expect(defaultData.user).to.equal('Bob Barker');
      });
    });
  
    describe('Template', () =&gt; {
      Vue.use(VueRouter);
  
      it('should render correctly', () =&gt; {
        const component = getComponent();
  
        expect(component.$el);
      });
  
      it('should have a "div" element', () =&gt; {
        const component = getComponent();
  
        expect(component.$el.querySelectorAll('div').length);
      });
  
      it('should have a element with a "className" set to "version"', () =&gt; {
        const component = getComponent();
  
        expect(component.$el.querySelector('div')).to.have.className('version');
      });
    });
  });
  </code></pre>
  
  <p>What are I doing wrong?</p>