Error in Unit Test VueJS component with Vuex

Question

Error: undefined is not a constructor (evaluating 'vm.$el.querySelector('h3')')

Follow my code and full code here

// main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import 'babel-polyfill'

require('es6-promise').polyfill()

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

// Home.vue

<template>
  <div>
    <h3 class="ui center aligned header">
      An simple contact list
    </h3>

    <div class="ui fluid input">
      <input type="text" placeholder="Search..." v-model="searchTerm" autofocus autocomplete="false">
    </div>


    <div class="ui inverted dimmer" :class="{ 'active': isFetchingContacts }">
      <div class="ui text loader">Loading contacts</div>
    </div>
    <transition-group name="custom" mode="out-in"
                      enter-active-class="animated flipInX"
                      class="ui middle aligned selection celled relaxed list">
      <component class="item"
                 v-for="contact in contacts" :key="contact.id"
                 :is="openedId === contact.id ? 'contact-card' : 'contact-item'" :contact=contact>
      </component>
    </transition-group>

    <div class="ui warning message" v-if="contacts.length <= 0">
      <div class="header">
        No contacts found!
      </div>
    </div>

  </div>
</template>

<script>
  import { mapActions, mapGetters, mapState } from 'vuex'
  import _ from 'lodash'
  import contactItem from './ContactItem'
  import contactCard from './ContactCard'

  export default {
    name: 'home',
    data () {
      return { searchTerm: '' }
    },

    created () { this.fetchContacts() },
    watch: {
      '$route': 'fetchContacts',
      'searchTerm': 'search'
    },

    computed: {
      ...mapGetters([ 'contacts' ]),
      ...mapState({
        isFetchingContacts: state => state.isFetchingContacts,
        openedId: state => state.openedId
      })
    },
    methods: {
      ...mapActions([ 'fetchContacts' ]),
      search: _.debounce(function () {
        this.fetchContacts(this.searchTerm)
      }, 900)
    },
    components: { contactItem, contactCard }
  }
</script>

// Home.spec.js
import Vue from 'vue'
import Home from '@/components/Home'

describe('Home.vue', () => {
  it('should render title', () => {
    const vm = new Vue(Home).$mount()
    expect(vm.$el.querySelector('h3'))
      .toBe('An simple contact list')
  }) 
})

Console error

  Home.vue
    ✗ should render title
        undefined is not a constructor (evaluating 'vm.$el.querySelector('h3')')
        webpack:///test/unit/specs/Home.spec.js:7:32 <- index.js:30622:32

ERROR LOG: '[Vue warn]: Error in created hook: 
(found in <Root>)'
ERROR LOG: TypeError{stack: 'mappedAction@http://localhost:9876/base/index.js?fcbe9e188a70bce472b9278dcad3e9e00645b644:10798:25
boundFn@http://localhost:9876/base/index.js?fcbe9e188a70bce472b9278dcad3e9e00645b644:690:16
created@http://localhost:9876/base/index.js?fcbe9e188a70bce472b9278dcad3e9e00645b644:31008:23
callHook@http://localhost:9876/base/index.js?fcbe9e188a70bce472b9278dcad3e9e00645b644:2786:25
_init@http://localhost:9876/base/index.js?fcbe9e188a70bce472b9278dcad3e9e00645b644:4209:13
VueComponent@http://localhost:9876/base/index.js?fcbe9e188a70bce472b9278dcad3e9e00645b644:4373:17
http://localhost:9876/base/index.js?fcbe9e188a70bce472b9278dcad3e9e00645b644:30627:29
callFnAsync@http://localhost:9876/absolute/Users/ridermansb/Projects/frontend-recruitment-orion/node_modules/mocha/mocha.js?0491afff0b566ea45cd04c9164a355dba705689e:4470:25
run@http://localhost:9876/absolute/Users/ridermansb/Projects/frontend-recruitment-orion/node_modules/mocha/mocha.js?0491afff0b566ea45cd04c9164a355dba705689e:4420:18
runTest@http://localhost:9876/absolute/Users/ridermansb/Projects/frontend-recruitment-orion/node_modules/mocha/mocha.js?0491afff0b566ea45cd04c9164a355dba705689e:4936:13
http://localhost:9876/absolute/Users/ridermansb/Projects/frontend-recruitment-orion/node_modules/mocha/mocha.js?0491afff0b566ea45cd04c9164a355dba705689e:5042:19
next@http://localhost:9876/absolute/Users/ridermansb/Projects/frontend-recruitment-orion/node_modules/mocha/mocha.js?0491afff0b566ea45cd04c9164a355dba705689e:4853:16
http://localhost:9876/absolute/Users/ridermansb/Projects/frontend-recruitment-orion/node_modules/mocha/mocha.js?0491afff0b566ea45cd04c9164a355dba705689e:4863:11
next@http://localhost:9876/absolute/Users/ridermansb/Projects/frontend-recruitment-orion/node_modules/mocha/mocha.js?0491afff0b566ea45cd04c9164a355dba705689e:4787:16
http://localhost:9876/absolute/Users/ridermansb/Projects/frontend-recruitment-orion/node_modules/mocha/mocha.js?0491afff0b566ea45cd04c9164a355dba705689e:4831:9
timeslice@http://localhost:9876/absolute/Users/ridermansb/Projects/frontend-recruitment-orion/node_modules/mocha/mocha.js?0491afff0b566ea45cd04c9164a355dba705689e:82:27', line: 10798, sourceURL: 'http://localhost:9876/base/index.js?fcbe9e188a70bce472b9278dcad3e9e00645b644'}
ERROR LOG: '[Vue warn]: Error in render function:

Panos Vakalopoulos · Accepted Answer · 2017-10-27 10:02:05Z

4

you need to include a store, in order to get your HTML rendered.

import Vuex from 'vuex'

const store = new Vuex.Store()
const Component = Vue.extend(Home)
const vm = new Component({store}).$mount()

answered Oct 27, 2017 at 10:02

Panos Vakalopoulos

5351 gold badge8 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Error in Unit Test VueJS component with Vuex

Console error

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Console error

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related