Vue.js

Question

我正在为 Vue 应用编写一些单元测试。当我尝试测试 DOM 内容时一切正常，但我无法访问我的组件的数据。事实上，如果我 console.log 我的组件 $data 属性没有数据，它会打印一个空对象，没有初始定义的数据或任何其他数据。什么都没有。

这是一些代码

一些vue组件

<template>
   <form @submit.prevent="saveAccount">
      <label for="accountType">Tipo de cuenta</label>
        <select class="form-control" id="accountType" v-model="newAccount.type">
          <option v-for="type in accountTypes" v-bind:value="type.value">
            {{type.label}}
          </option>
        </select>
   </form>
</template>
<script>
export default {
  data () {
    return {
      accountTypes: [
        {value: '1', label: 'Activo'},
        {value: '2', label: 'Pasivo'},
        {value: '3', label: 'Patrimonio'},
        {value: '4', label: 'INTO'}
      ]
    }
  }
}
</script>

我的测试

  beforeAll(() => {
    vm = new Vue({
      template: '<div><account></account></div>',
      components: { account }
    }).$mount()
  })

  afterAll(() => {
    vm.$destroy(true)
  })

  it('account type', () => {
    // this pass
    expect(vm.$el.querySelectorAll('#accountType option').length).toBe(4)
    const options = vm.$el.querySelectorAll('#accountType option')
    // here accountTypes is undefined
    const accountValues = vm.accountTypes.map(type => {
      return type.value
    })
    options.forEach(option => {
      expect(accountValues.indexOf(option.value)).not.toBe(-1)
    })
  })

省略了部分代码。那么，为什么我的组件数据是空的，但同时在 DOM 中正确呈现？

Answer 1

经过反复尝试，我找到了答案，现在很明显了。问题是，我在错误的地方搜索数据。 vm我这样定义的对象

vm = new Vue({
  template: '<div><account></account></div>',
  components: { account }
}).$mount()

是一个只有组件和模板选项的 Vue 实例，我要搜索的数据在该实例的 子实例 中。所以，我必须使用这种方式来访问数据

const accountInstance = vm.$children[0]

这行得通，因为为了测试我定义了一个易于识别的单子项。我在使用 const accountInstance = new account() 之前也尝试过，但这会引发错误，因为 vue 组件不是构造函数

Vue.js - karma/phantomjs 测试中丢失的数据

Vue.js - Data lost in karma/phantomjs tests

phantomjs

karma-jasmine