一、起步

1. jest

Jest是 Facebook 的一套开源的 JavaScript 测试框架， 它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，配置较少，对vue框架友好。

2. vue-test-utils

Vue Test Utils 是 Vue.js 官方的单元测试实用工具库，为jest和vue提供了一个桥梁，暴露出一些接口，让我们更加方便的通过Jest为Vue应用编写单元测试。

3. 安装

如果已经安装配置了webpack、babel的vue脚手架，现在需要在安装的是：

npm i jest @vue/test-utils vue-jest babel-jest jest-serializer-vue -D

4. 在package.json中定义单元测试的脚本和配置jest

"scripts": {
    "test": "jest"
  },

 "jest": {
    "moduleFileExtensions": [
      "js",
      // 告诉 Jest 处理 `*.vue` 文件
      "vue"
    ],
    "moduleNameMapper": {
      // 支持源代码中相同的 `@` -> `src` 别名
      "^@/(.*)$": "<rootDir>/src/$1"
    },
    "transform": {
      // 用 `babel-jest` 处理 `*.js` 文件
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
      // 用 `vue-jest` 处理 `*.vue` 文件
      ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest"
    },
    "snapshotSerializers": [
      // 快照的序列化工具
      "<rootDir>/node_modules/jest-serializer-vue"
    ],
    //成多种格式的测试覆盖率报告  可选
    "collectCoverage": true,
    "collectCoverageFrom": ["**/*.{js,vue}", "!**/node_modules/**"]
  }

5. 配置.babelrc文件

{
  "presets": [
    ["env", { "modules": false }]
  ],
  "env": {
    "test": {
      "presets": [
        ["env"]
      ]
    }
  }
}

6. 写测试文件，放在根目录下test文件夹中，以.spec.js或.test.js为后缀名的文件，正常名字和组件名一致，如测试header组件，应该名字叫做header.spec.js或header.test.js

header.vue

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

header.spec.js

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

describe('header', () => {
  const wrapper = mount(header)

  it('点击按钮', () => {
    const button = wrapper.find('button');
    expect(button.text()).toBe('Increment');
    button.trigger('click');
    expect(wrapper.find('.count').text()).toBe('1')
  })
})

7. 执行命令行：npm test，运行单元测试

 

 

参考：

1.https://vue-test-utils.vuejs.org/zh/

2.https://jestjs.io/docs/en/getting-started

3.https://www.jianshu.com/p/70a4f026a0f1