一、概述

jest 是facebook推出的一款测试框架，它自动集成了断言、JSDom、覆盖率报告等开发者所需要的所有测试工具，是一款几乎零配置的测试框架。它对同样是 Facebook 的开源前端框架 React 的测试十分友好。

vue-cli3版本已经自带了jest的单元测试环境；

二、jest与Vue-test-utils

Vue-test-utils是Vue的官方的单元测试框架，它提供了一系列非常方便的工具，使我们更加轻松的为Vue构建的应用来编写单元测试。主流的 JavaScript 测试运行器有很多，但 Vue Test Utils 都能够支持。它是测试运行器无关的。
Vue-test-utils在Vue和Jest之前提供了一个桥梁，暴露出一些接口，让我们更加方便的通过Jest为Vue应用编写单元测试。

三、安装配置

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

然后在package.json中定义一个单元测试的脚本。

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

为了告诉Jest如何处理*.vue文件，需要安装和配置vue-jest预处理器：

npm install --save-dev vue-jest

在jest.conf.js配置文件中进行配置：

module.exports = {
  moduleFileExtensions: ['js', 'json', 'vue'],
  moduleNameMapper: {
    '^@/(.*)#39;: '<rootDir>/src/$1'
  },
  transform: {
    '^.+\\.js#39;: '<rootDir>/node_modules/babel-jest',
    '.*\\.(vue)#39;: '<rootDir>/node_modules/vue-jest'
  },
}

配置好了之后，就可以开始编写单元测试了。

四、实例

通过vue-test-utils提供的mount方法来挂载组件，创建包裹器和Vue实例；

import { mount } from '@vue/test-utils'
import Component from './component'

describe('Component', () => {
  test('是一个 Vue 实例', () => {
    const wrapper = mount(Component)
    expect(wrapper.isVueInstance()).toBeTruthy()
  })
})

启用单元测试的命令：

npm run unit