使用 Vuex 对 VueJS 组件进行单元测试时出错

Posted 2023-02-23

【中文标题】使用 Vuex 对 VueJS 组件进行单元测试时出错

【英文标题】：Error in Unit Test VueJS component with Vuex

【发布时间】：2017-07-21 10:16:03

【问题描述】：

错误：undefined 不是构造函数（正在评估 'vm.$el.querySelector('h3')'）

按照我的代码和完整的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')
  ) 
)

---

控制台错误

  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: TypeErrorstack: '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: 

【参考方案1】：

您需要包含一个商店，以便呈现您的 html。

import Vuex from 'vuex'

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