在VueJS单元测试中使用querySelector记录错误

时间:2017-04-19 10:12:11

标签: unit-testing jasmine vue.js karma-jasmine vuejs2

在编写单元测试时,每次在该组件上使用querySelector()时,我都会继续获得大量的堆栈。测试仍然通过,但只是抛出和错误。这是我对默认Hello组件的规范:

Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>

Hello.spec.js

import Vue from 'vue'
import Hello from '@/components/Hello'

describe('Hello.vue', () => {
 it('should render correct contents', () => {
  const vm = new Vue(Hello).$mount()
  expect(vm.$el.querySelector('.hello h1').textContent)
   .toEqual('Welcome to Your Vue.js App')
 })
})

的package.json

{
 "vue": "^2.2.2",
 "karma": "^1.6.0",
 "karma-jasmine": "^1.1.0",
 "jasmine-core": "^2.5.2",
}

错误:

ERROR LOG: TypeError{stack: 'render@http://localhost:9876/base/index.js?6c531a43b44d6e4b9f5a01ea1fbbc3a4597aeae5:80741:28 get@http://localhost:9876/base/index.js?6c531a43b44d6e4b9f5a01ea1fbbc3a4597aeae5:5337:29 evaluate@http://localhost:9876/base/index.js?6c531a43b44d6e4b9f5a01ea1fbbc3a4597aeae5:5437:24 computedGetter@http://localhost:9876/base/index.js?6c531a43b44d6e4b9f5a01ea1fbbc3a4597aeae5:5681:25 render@http://localhost:9876/base/index.js?6c531a43b44d6e4b9f5a01ea1fbbc3a4597aeae5:91018:131 _render@http://localhost:9876/base/index.js?6c531a43b44d6e4b9f5a01ea1fbbc3a4597aeae5:6477:26 updateComponent@http://localhost:9876/base/index.js?6c531a43b44d6e4b9f5a01ea1fbbc3a4597aeae5:5026:28 get@http://localhost:9876/base/index.js?6c531a43b44d6e4b9f5a01ea1fbbc3a4597aeae5:5337:29 Watcher@http://localhost:9876/base/index.js?6c531a43b44d6e4b9f5a01ea1fbbc3a4597aeae5:5320:15 mountComponent@http://localhost:9876/base/index.js?6c531a43b44d6e4b9f5a01ea1fbbc3a4597aeae5:5030:28 $mount@http://localhost:9876/base/index.js?6c531a43b44d6e4b9f5a01ea1fbbc3a4597aeae5:10120:24 $mount@http://localhost:9876/base/index.js?6c531a43b44d6e4b9f5a01ea1fbbc3a4597aeae5:12169:20 http://localhost:9876/base/index.js?6c531a43b44d6e4b9f5a01ea1fbbc3a4597aeae5:43223:64 attemptSync@http://localhost:9876/absolute/Users/user/projects/my-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:1950:28 run@http://localhost:9876/absolute/Users/user/projects/my-project/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?916005cc407925f4764668d61d04888d59258f5d:1938:20...

0 个答案:

没有答案