Question

我是Javascript和Vue.js测试的新手。我通过vue-cli和内置了Karma，Mocha和PhantomJS的完整webpack模板安装了vue。我运行了hello world组件测试并通过了。

我有一个名为my-input.vue的vuejs组件，它生成以下HTML。

<template>
  <div>
    <input class="test-focused">
  </div>
</template>

<script>
  export default {

  }
</script>

我对组件的测试看起来像这样。

import Vue from 'vue'
import { default as MyInput } from 'src/components/my-input.vue'

describe('my-input.vue', () => {
  it('should display an input element', () => {
    const expected = "<input class='test-focused'>"

    const vm = new Vue({
      template: '<div><my-input></my-input></div>',
      components: { 'my-input': MyInput }
    }).$mount()

    // I tried these separately.
    expect(vm.$el.querySelector('input.test-focused').isPresent()).to.be.true

    expect(document.getElementsByTagName('input').indexOf(expected) != -1).to.be.true
  })
})

当我分别运行每个expect（）语句时，我得到undefined is not a constructor。

这似乎是一个简单的测试。

如何正确测试元素是否存在？

另外，如果您可以向我指出有关适用于vm.$el.querySelector('input.test-focused')的方法的文档，以及expect()它会有所帮助。消除Jasmine，Mocha和其他饮料的语法似乎使测试变得比需要toBe()或not.to.be更难。

Answer 1

试试这个：http://jsfiddle.net/9mdqw53b/

const MyInput = { template: '<input class="test-focused">' }

describe('my-input.vue', () => {
  it('should display an input element', () => {
    const vm = new Vue({
      template: '<div><my-input></my-input></div>',
      components: { MyInput }
    }).$mount()

    // I tried these separately.
    expect(vm.$el.querySelectorAll('input.test-focused').length).toBe(1)
  })
})

Answer 2

expect（vm。$ el.querySelector（'input.test-focused'）！== null）.to.be.true

测试元素是否存在Vuejs，Karma，Mocha

2 个答案: