Vue .js 2.0 unit tests

Vue .js 2.0 unit tests

Configurations and tools

Any module-compatible build system works, but if you need a specific recommendation, you can use Karma for automated testing. I t has many community plug-ins, including support for Webpack and Browserify. For more detailed installation steps, refer to the installation documentation for each project, and these Karma configuration examples can help you get started quickly (Webpack configuration, Browserify configuration).

Simple assertions

In terms of the code structure of the test, you don't have to do anything special in order to be testable in your components. Just export the original settings:

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

When testing components, all you have to do is import objects and Vue and then use many common assertions:

// 导入 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 Ctor = Vue.extend(MyComponent)
    const vm = new Ctor().$mount()
    expect(vm.$el.textContent).toBe('bye!')
  })
})

Write components that can be tested

The rendering output of many components is determined by its props. I n fact, if a component's rendering output depends entirely on its props, it makes the test as simple as asserting the return value of a pure function with different parameters. Here's an example:

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

You can assert its rendering output in different props with the propsData option:

import Vue from 'vue'
import MyComponent from './MyComponent.vue'
// 挂载元素并返回已渲染的文本的工具函数 
function getRenderedText (Component, propsData) {
  const Ctor = Vue.extend(Component)
  const vm = new Ctor({ propsData }).$mount()
  return vm.$el.textContent
}
describe('MyComponent', () => {
  it('render correctly with different props', () => {
    expect(getRenderedText(MyComponent, {
      msg: 'Hello'
    })).toBe('Hello')
    expect(getRenderedText(MyComponent, {
      msg: 'Bye'
    })).toBe('Bye')
  })
})

Asserts asynchronous updates

Because of Vue's asynchronous update of the DOM, some assertions that rely on the results of the DOM update must be made in the Vue.nextTick callback:

// 在状态更新后检查生成的 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()
  })
})

We plan to do a common set of test tools to make rendering outputs and assertions of different strategies( such as ignoring basic renderings of sub-components) simpler.