一、快速入門

git clone https://github.com/vuejs/vue-test-utils-getting-startedcd vue-test-utils-getting-startednpm installnpm test

下載的示例專案如下：

執行效果：

二、解析1. 測試框架

專案的test使用jest，在package裡可以看到依賴項：

{  "name": "vue-test-utils-getting-started",  "version": "1.0.0",  "dependencies": {    "vue": "^2.4.4"  },  "devDependencies": {    "@vue/test-utils": "^1.0.0-beta.13",    "babel-jest": "^21.2.0",    "babel-preset-env": "^1.6.0",    "jest": "^21.2.1",    "regenerator-runtime": "^0.11.0",    "vue-template-compiler": "^2.4.4"  },  "scripts": {    "test": "jest"  },  "author": "Evan You",  "license": "MIT"}

如果是現有專案要加依賴支援可以使用命令：

# unit testingvue add @vue/unit-jest# or:vue add @vue/unit-mocha# end-to-endvue add @vue/e2e-cypress# or:vue add @vue/e2e-nightwatch

2. counter.js內容

counter.js是一個簡單的vue 檔案，內容如下：

// counter.jsexport default {  template: `    <div>      <span class="count">{{ count }}</span>      <button @click="increment">Increment</button>    </div>  `,  data () {    return {      count: 0    }  },  methods: {    increment () {      this.count++    }  }}

3. 單元測試程式的寫法

test.js

// Import the mount() method from the test utils// and the component you want to testimport { mount } from '@vue/test-utils'import Counter from './counter'describe('Counter', () => {  // Now mount the component and you have the wrapper  const wrapper = mount(Counter)  it('renders the correct markup', () => {    expect(wrapper.html()).toContain('<span class="count">0</span>')  })  // it's also easy to check for the existence of elements  it('has a button', () => {    expect(wrapper.contains('button')).toBe(true)  })  it('button should increment the count', () => {    expect(wrapper.vm.count).toBe(0)    const button = wrapper.find('button')    button.trigger('click')    expect(wrapper.vm.count).toBe(1)  })})

掛載元件方法

Vue Test Utils 透過把元件隔離掛載，然後模擬必要的輸入（prop、注入和使用者事件），來對輸出（渲染結果、觸發的自定義事件）進行斷言，從而實現單元測試。

可以使用mount 方法來建立包裹器：test.js

// test.js// 從測試實用工具集中匯入 `mount()` 方法// 同時匯入你要測試的元件import { mount } from '@vue/test-utils'import Counter from './counter'// 現在掛載元件，你便得到了這個包裹器const wrapper = mount(Counter)// 你可以透過 `wrapper.vm` 訪問實際的 Vue 例項const vm = wrapper.vm// 在控制檯將其記錄下來即可深度審閱包裹器// 我們對 Vue Test Utils 的探索也由此開始console.log(wrapper)

只掛載不渲染

import { shallowMount } from '@vue/test-utils'const wrapper = shallowMount(Component)wrapper.vm // 掛載的 Vue 例項

測試渲染的html

import { mount } from '@vue/test-utils'import Counter from './counter'describe('Counter', () => {  // 現在掛載元件，你便得到了這個包裹器  const wrapper = mount(Counter)  it('renders the correct markup', () => {    expect(wrapper.html()).toContain('<span class="count">0</span>')  })  // 也便於檢查已存在的元素  it('has a button', () => {    expect(wrapper.contains('button')).toBe(true)  })})

模擬使用者操作

下面示例用來先定位按鈕，再呼叫trigger模擬點選。

it('button click should increment the count', () => {  expect(wrapper.vm.count).toBe(0)  const button = wrapper.find('button')  button.trigger('click')  expect(wrapper.vm.count).toBe(1)})

非同步測試元件

it('button click should increment the count text', async () => {  expect(wrapper.text()).toContain('0')  const button = wrapper.find('button')  await button.trigger('click')  expect(wrapper.text()).toContain('1')})