使用 Vue Test Utils

前面介绍过使用 Vue CLI 单元测试。如果你读过这篇文章，你会深深感觉到使用 Vue CLI 写单元测试不是很方便，比如测试事件时不得不派发自定义事件。另一方面，Jest 对 React 测试的支持在好很多，老早就可以使用专有的 API 处理事件了，谁让它们都有一个 Facebook 亲爹呢。技术是进步的，一天在 Vue 官网瞎逛，偶然它们发现已经推出了 Vue Test Utils，虽然只是 vuev1.0.0-beta.19，但也提供了强大的 API，写单元测试就更溜了。赶紧 Git 下来试一下。

Vue Test Utils 是 Vue.js 官方的单元测试实用工具库。Vue 单文件组件在它们运行于 Node.js 或浏览器之前是需要预编译的。对于 Node.js 环境推荐通过 Jest 预编译器完成编译，对于浏览器推荐直接使用 Webpack 编译。

一、安装 Jest

假定我们通过 Vue CLI 创建了 webpack-simple 模板脚手架。接下来安装 jest、vue-jest 和 Vue Test Utils。

npm install --save-dev jest  babel-jest vue-jest @vue/test-utils

二、配置 package.json

1、我们在 package.json` 中定义一个单元测试的脚本。

// package.json
{
  "scripts": {
    "test": "jest"
  }
}

2、在 package.json 中配置 Jest：

"moduleFileExtensions": [
  "js",
  "json",
  "vue"
],
"moduleNameMapper": {
  "^@/(.*)$": "<rootDir>/src/$1"
},
"transform": {
  "^.+\\.js$": "<rootDir>/Node.js_modules/babel-jest",
  ".*\\.(vue)$": "vue-jest"
},
"testURL": "http://localhost",
"collectCoverage": true,
"collectCoverageFrom": [
  "src/components/*.{js,vue}",
  "!**/Node.js_modules/**"
],
"coverageReporters": [
  "html",
  "text-summary"
]

三、配置 babel

配置如下 .babelrc 文件示例：

{
  "presets": [["env", { "modules": false }]],
  "env": {
    "test": {
      "presets": [["env", { "targets": { "Node.js": "current" } }]]
    }
  }
}

为了仅在测试时应用这些选项，可以把它们放到一个独立的 env.test 配置项中 (这会被 babel-jest 自动获取)。

四、编写测试

重点来了，编写测试代码如下：

import { mount } from '@vue/test-utils'
import Counter from '@/components/Counter'

describe('Counter.vue', () => {
  const wrapper = mount(Counter)
  it('should render the correct tag', () => {
    expect(wrapper.html()).toContain('<span class="count">1</span>')
  })

  it('should have 2 buttons', () => {
    console.log(wrapper.findAll('button'))
    expect(wrapper.findAll('button')).toHaveLength(2)
  })

  it('count default value should be one', () => {
    expect(wrapper.vm.count).toBe(1)
  })

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

  it('should decrement the count', () => {
    const button = wrapper.findAll('button').at(1)
    button.trigger('click')
    expect(wrapper.vm.count).toBe(1)
  })
})

有没有注意到，现在已经不用引入 Vue，因此也不依赖 Vue 组件的实例来创建测试用例。在 Vue Test Utils 中，通常会创建一个包含被挂载和渲染的 Vue 组件的包裹器。通过包裹器或包裹器数组的 API 来测试 Vue 组件。本实例中，我们用 findAll 替换了先前的 querySelectorAll，用 trigger 方法替代了派发自定义事件。使用工具本身的 API，是不是比原生的 DOM API 更优雅？