Unit-Tests

Vue CLI verfügt über integrierte Optionen für Unit-Tests mit Jest oder Mocha sofort einsatzbereit. Wir verfügen auch über offizielle Vue Test Utils, die detailliertere Anleitungen und benutzerdefinierte Einstellungen bieten.

Inhaltsverzeichnis

• Einfache Pause Sprache

• Komponenten schreiben, die getestet werden können

• Asynchrone Updates beanspruchen NEU

Einfache Behauptung

Sie müssen zur Testbarkeit nichts Besonderes in der Komponente tun, exportieren Sie einfach die Originaleinstellungen:

<template>
  <span>{{ message }}</span>
</template>

<script>
  export default {
    data () {
      return {
        message: 'hello!'
      }
    },
    created () {
      this.message = 'bye!'
    }
  }
</script>

und folgen Sie dann Mit den Vue-Importkomponentenoptionen können Sie viele gängige Behauptungen verwenden (hier verwenden wir den Jasmine/Jest-Stil expect). Behauptungen als Beispiele):

// 导入 Vue.js 和组件，进行测试
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'

// 这里是一些 Jasmine 2.0 的测试，你也可以使用你喜欢的任何断言库或测试工具。

describe('MyComponent', () => {
  // 检查原始组件选项
  it('has a created hook', () => {
    expect(typeof MyComponent.created).toBe('function')
  })
  
  // 评估原始组件选项中的函数的结果
  it('sets the correct default data', () => {
    expect(typeof MyComponent.data).toBe('function')
    const defaultData = MyComponent.data()
    expect(defaultData.message).toBe('hello!')
  })
  
  // 检查 mount 中的组件实例
  it('correctly sets the message when created', () => {
    const vm = new Vue(MyComponent).$mount()
    expect(vm.message).toBe('bye!')
  })
  
  // 创建一个实例并检查渲染输出
  it('renders the correct message', () => {
    const Constructor = Vue.extend(MyComponent)
    const vm = new Constructor().$mount()
    expect(vm.$el.textContent).toBe('bye!')
  })
})

Komponenten schreiben, die getestet werden können

Viele Komponenten Die Rendering-Ausgabe wird durch seine Requisiten bestimmt. Wenn die gerenderte Ausgabe einer Komponente tatsächlich vollständig von ihren Requisiten abhängt, ist das Testen so einfach wie die Bestätigung des Rückgabewerts einer reinen Funktion mit verschiedenen Parametern. Schauen Sie sich das folgende Beispiel an:

<template>
  <p>{{ msg }}</p>
</template>

<script>
  export default {
    props: ['msg']
  }
</script>

Sie können propsData in verschiedenen Requisiten übergeben Optionen bestätigen die gerenderte Ausgabe:

import Vue from 'vue'
import MyComponent from './MyComponent.vue'

// 挂载元素并返回已渲染的文本的工具函数
function getRenderedText (Component, propsData) {
  const Constructor = Vue.extend(Component)
  const vm = new Constructor({ propsData: propsData }).$mount()
  return vm.$el.textContent
}

describe('MyComponent', () => {
  it('renders correctly with different props', () => {
    expect(getRenderedText(MyComponent, {
      msg: 'Hello'
    })).toBe('Hello')
    expect(getRenderedText(MyComponent, {
      msg: 'Bye'
    })).toBe('Bye')
  })
})

Assert asynchronous changes

due to Vue Asynchrone Aktualisierung von DOM, einige hängen von DOM ab Die Behauptung des Update-Ergebnisses muss im Vue.nextTick-Callback erfolgen:

// 在状态更新后检查生成的 HTML
it('updates the rendered message when vm.message updates', done => {
  const vm = new Vue(MyComponent).$mount()
  vm.message = 'foo'
  
  // 在状态改变后和断言 DOM 更新前等待一刻
  Vue.nextTick(() => {
    expect(vm.$el.textContent).toBe('foo')
    done()
  })
})

Weitergehende Inhalte zu Vue-Unit-Tests finden Sie unter Vue Test Utils und auf unserer Seite Artikel über Kochbuchartikel zum Unit-Testen von Vue-Komponenten.