javascript - 为 Vue webapp 运行单元测试时出错

Question

我正在使用 VueJs 编写一个 web 应用程序，我正在尝试为其设置单元测试，我从 vue-mdl 中得到了启发。单元测试。但是我的代码的测试无法正常运行，并且我得到的 vm.$el 为 undefined，因此根本无法继续前进。

这是我正在尝试测试的组件:

确认.vue

<template>
    <div>
        Your order has been confirmed with the following details.
    </div>
</template>

<script type="text/javascript">
export default {
  data () {
    return {
      data_from_pg: null
    }
  }
}
</script>

这里是对其进行测试，但失败了

Confirmation.spec.js

import Confirmation from 'src/components/Confirmation'
import { vueTest } from '../../utils'

describe('Confirmation', () => {
  let vm
  let confirmation
  before(() => {
    vm = vueTest(Confirmation)
    console.log('vm.$el ' + vm.$el) => this prints undefined
    confirmation = vm.$el.querySelector('#confirmation') => so this line gives error
    // confirmation = vm.$('#confirmation')
  })

  it('exists', () => {
    confirmation.should.exist
    confirmation.should.be.visible
  })
})

utils.js

export function vueTest (Component) {
  const Class = Vue.extend(Component)
  Class.prototype.$ = function (selector) {
    return this.$el.querySelector(selector)
  }
  Class.prototype.nextTick = function () {
    return new Promise((resolve) => {
      this.$nextTick(resolve)
    })
  }

  const vm = new Class({
    replace: false,
    el: 'body'
  })

  return vm
}

我的完整代码可用here ，以及所有测试配置，我多次尝试更改这些配置，但无法弄清楚如何使其工作。如果您在某处发现错误，请告诉我。

Answer 1

utils 中的 vueTest 函数正在尝试将 Vue 实例加载到 body 标记中:

const vm = new Class({
  replace: false,
  el: 'body'
})
return vm

单元测试不会加载 index.html 作为应用程序的入口点，而是加载您想要测试的各个组件；因此，您无权访问 document 或 html 元素，并且该组件永远不会安装。我建议使用vm.$mount() :

If elementOrSelector argument is not provided, the template will be rendered as an off-document element.

您可以将上面的行更改为如下所示

const vm = new Class();
vm.$mount();
return vm;

您的测试现在应该可以访问 $el 属性。