Модульное тестирование

Vue CLI имеет встроенный модуль для тестирования с Mocha или Jest, который работает из коробки. Существуют также официальные утилиты Vue Test Utils, которые предоставляют более подробные инструкции для пользовательских настроек.

Простые утверждения

Нам не нужно делать ничего особенного в наших компонентах, чтобы сделать их тестируемыми. Мы можем экспортировать необработанные варианты:

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

Затем мы импортируем параметры компонента вместе с Vue и можем сделать много общих утверждений (в этом случае мы используем в качестве примера ожидаемые утверждения в стиле Jest / Jasmine):

// Import Vue as well as the component being tested
```import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'
// these are some Jasmine 2.0 tests, though we can
// use any test runner / assertion library combo we prefer
describe('MyComponent', () => {
  // Inspecting the raw component options
  it('has a created hook', () => {
    expect(typeof MyComponent.created).toBe('function')
  })
  // we evaluate the results of functions in the
  // raw component options
  it('sets the correct default data', () => {
    expect(typeof MyComponent.data).toBe('function')
    const defaultData = MyComponent.data()
    expect(defaultData.message).toBe('hello!')
  })
  // Inspecting the component instance on mount
  it('correctly sets the message when created', () => {
    const vm = new Vue(MyComponent).$mount()
    expect(vm.message).toBe('bye!')
  })
  // we mount an instance and inspect the render output
  it('renders the correct message', () => {
    const Constructor = Vue.extend(MyComponent)
    const vm = new Constructor().$mount()
    expect(vm.$el.textContent).toBe('bye!')
  })
})

Написание тестируемых компонентов

Реквизиты, которые получает компонент, определяют выходные данные компонента. Проверить компонент очень просто, если его результат рендеринга зависит только от его свойств, это похоже на утверждение возвращаемого значения чистой функции с другими аргументами. Упрощенный пример показан ниже:

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

Мы можем утверждать вывод его рендеринга с помощью различных реквизитов, используя параметр propsData:

import Vue from 'vue'
import MyComponent from './MyComponent.vue'
// A helper function that mounts and returns the rendered text
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')
  })
})

Утверждение асинхронных обновлений

Поскольку Vue выполняет обновления DOM асинхронно, утверждения об обновлениях DOM, возникающие в результате изменения состояния, будут сделаны в обратном вызове Vue.nextTick:

// this Inspects the generated HTML after a state update
```it('updates the rendered message when vm.message updates', done => {
  const vm = new Vue(MyComponent).$mount()
  vm.message ='foo'
  // we wait a "tick" after state change before asserting DOM updates
  Vue.nextTick(() => {
    expect(vm.$el.textContent).toBe('foo')
    done()
  })
})

Проверьте Vue Test Utils, если вам нужна более подробная информация о модульном тестировании в Vue.