在Vue中编写单元测试

最近一直在写 Vue 的单元测试，发现 Vue 其实本身的单元测试并不是很难写但是项目中的各种奇奇怪怪的配置项简直令人抓狂。

首先为什么要写单元测试

帮助我们优化代码
节省手动测试的时间
减少开发新功能的时候的BUG
促进项目迭代
开源项目必备

无论是哪一种都是我们在项目中做单元测试的初始动力。

如何写一个单元测试

在动手之前你可能会遇到在项目中如何编写一份单元测试的小小阻力，那么我们一起来看如何从零开始编写一个项目的单元测试。

1.首先本文基于 Vue 官方推荐的单元测试 Vue-unit-test 来进行，如果你有自己习惯的其他的测试框架可以结合本文来尝试。

2.配置项，此处因为配置项格外的多所以我先把我项目中的配置贴出来然后讲解。

首先我是把jest的配置写到了packgae.json中，当然你可以通过在根目录新建一个 jest.config.js 来写jest的配置项

"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**"
  ]
}