Vue jest test 自动化单元测试

参考:https://github.com/lenvonsam/vue-jest-test/wiki/

测试环境搭建
第一步:此次用的Vue-jest是基于Vue-cli框架搭建的，所以第一步需要安装Vue-cli

npm install -g vue-cli

第二步: 利用cli创建新的webpack集成的测试项目(一般用于集成测试)
这步操作需要一定的时间，请耐心等待

vue init webpack 项目名称

第三步:run

npm run dev

第四步 在项目package.json里面定义测试脚本和添加jest测试配置

"scripts": {
  "test": "jest"
},
"jest": {
  "moduleFileExtensions": [
    "js",
    "json",
    "vue"
  ],
  "transform": {
    ".*\\.(vue)$": "<rootDir>/node_modules/vue-jest",
    "^.+\\.(js)$": "<rootDir>/node_modules/babel-jest"
  },
  "moduleNameMapper": {
    "^~/(.*)$": "<rootDir>/$1"
  }
}

第五步 配置babel测试配置，在.babelrc文件里面添加如下代码

{
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }
}

第六步 在项目根目录下创建test文件夹，并在test文件夹下面创建helloworld.spec.js，并在文件里面写下如下代码

function helloWorld () {
  return 'Hello World'
}
describe('hello world', () => {
  it('should render correct result', () => {
    expect(helloWorld()).toEqual('Hello World')
  })
})

第七步 测试是否添加jest成功

npm run test