前期准备
使用vue-cli脚手架工具初始化一个webpack模版的项目，在命令行配置单元测试时选择手动配置。模版初始化完成后，整个项目已经安装并配置好了 webpack、vue-loader 和 Babel。
我们要做的第一件事就是安装 Jest 和 Vue Test Utils：
npm install --save-dev jest @vue/test-utils
然后我们在package.json里面配置好测试命令：
// package.json
{
"scripts": {
"test": "jest"
}
}
在 Jest 中处理单文件组件
为了告诉 Jest 如何处理 *.vue 文件，我们需要安装和配置 vue-jest 预处理器：
npm install --save-dev vue-jest
为 Jest 配置 Babel
尽管最新版本的 Node 已经支持绝大多数的 ES2015 特性，你可能仍然想要在你的测试中使用 ES modules 语法和 stage-x 的特性。为此我们需要安装 babel-jest：
npm install --save-dev babel-jest
除此之外， webpack模版 使用了 babel-preset-env，这时默认的 Babel 配置会关闭 ES modules 的转译，因为 webpack 已经可以处理 ES modules 了。然而，我们还是需要为我们的测试而开启它，因为 Jest 的测试用例会直接运行在 Node 上。
同样的，我们可以告诉 babel-preset-env 面向我们使用的 Node 版本。这样做会跳过转译不必要的特性使得测试启动更快。
为了仅在测试时应用这些选项，可以把它们放到一个独立的 env.test 配置项中 (这会被 babel-jest 自动获取)。
.babelrc 文件示例：
测试覆盖率
Jest 可以被用来生成多种格式的测试覆盖率报告。以下是一个简单的起步的例子：扩展你的 jest 配置的collectCoverage 选项，然后添加 collectCoverageFrom 数组来定义需要收集测试覆盖率信息的文件。我们还可以可以通过 coverageReporters 选项来定制覆盖率报告的格式。
针对以上所有配置，我们可以创建一个配置文件jest.conf.js，并将它放在相应目录底下：
package.json里面的命令也要改一下："test": "jest --config test/unit/config/jest.conf.js"。
放置测试文件
默认情况下，Jest 将会递归的找到整个工程里所有 .spec.js 或 .test.js 扩展名的文件
测试规范示例
import { mount } from '@vue/test-utils'
import Component from './component'
describe('Component', () => {
test('is a Vue instance', () => {
const wrapper = mount(Component)
expect(wrapper.isVueInstance()).toBeTruthy()
})
})
快照测试
当你用 Vue Test Utils 挂载一个组件时，你可以访问到 HTML 根元素。这可以保存为一个快照为快照测试所用。每当你想要确保你的UI不会有意外的改变，快照测试是非常有用的工具。
it('renders correctly', () => {
const wrapper = mount(Component)
expect(wrapper.element).toMatchSnapshot()
})
我们可以通过一个自定义的序列化工具改进被保存的快照：
npm install --save-dev jest-serializer-vue
在jest.conf.js文件中要添加相应选项：
// 快照的序列化工具
"snapshotSerializers":["jest-serializer-vue"]
可能存在的问题
在运行test命令时报错：Plugin/Preset files are not allowed to export objects，webpack
该问题由：babel-jest@24.xxx的版本与babel@6.xx的版本不匹配造成的。
解决方法：我们把babel-jest@24.xx版本降为21.0.1就可以了
测试脚本走不通很多时候都是各个模块版本不匹配造成的！
