2、集成到现有Vue项目

新建项目的童鞋可自行略过

第一步 安装Jest测试关键依赖

1、jest:^22.2.2
2、babel-jest:^22.2.2
3、vue-jest:^2.1.0
4、@vue/test-utils:^1.0.0-beta.11
5、babel-plugin-istanbul:^4.1.5

npm install --save-dev jest babel-jest vue-jest @vue/test-utils babel-plugin-istanbul

第二步 在项目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

结果如上图所示，表明已成功将Jest集成到现有项目中，真是可喜可贺^_^