最近一直在写 Vue 的单元测试，发现 Vue 其实本身的单元测试并不是很难写但是项目中的各种奇奇怪怪的配置项简直令人抓狂。
无论是哪一种都是我们在项目中做单元测试的初始动力。
在动手之前你可能会遇到在项目中如何编写一份单元测试的小小阻力，那么我们一起来看如何从零开始编写一个项目的单元测试。
1.首先本文基于 Vue 官方推荐的单元测试 Vue-unit-test 来进行，如果你有自己习惯的其他的测试框架可以结合本文来尝试。
2.配置项，此处因为配置项格外的多所以我先把我项目中的配置贴出来然后讲解。
首先我是把jest的配置写到了packgae.json中，当然你可以通过在根目录新建一个 jest.config.js 来写jest的配置项1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30"jest": {
"moduleFileExtensions": [
"js",
"jsx",
"json",
"vue"
],
"transform": {
"^.+\\.vue$": "vue-jest",
".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
"^.+\\.js?$": "babel-jest"
},
"moduleNameMapper": {
"^@/(.*)$": "<rootDir>/packages/$1"
},
"snapshotSerializers": [
"jest-serializer-vue"
],
"testMatch": [
"**/test/unit/**/*.spec.(js|jsx|ts|tsx)|**/__test__/*.(js|jsx|ts|tsx)"
],
"testURL": "http://localhost/",
"collectCoverage": true,
"collectCoverageFrom": [
"**/packages/**/*.vue",
"!**/node_modules/**",
"!**packages/main.js**",
"!**packages/router.js**"
]
}
完整的package.json的 项目地址。
其次是项目中需要配置babel,这里需要讲一下的是项目中使用的是 "babel-core": "7.0.0-bridge.0", 此babel与6.X版本冲突，所以 如果使用了其他 配置项的可能需要 这个 issue。
在做好了这些之后你只需要在根目录新建一个 test 文件夹并且在其中 unit 文件夹下新建 testName.spec.js 的文件即可开始测试之旅。