自动化测试：vue2+composition-api初始化jest

vue2+composition-api初始化jest步骤

安装jest和@vue/test-utils，这里注意因为我们是vue2的项目，所以不能直接安装@vue/test-utils，直接安装@vue/test-utils的话，@vue/test-utils的版本是2x版本，对应的是vue3。

npm install --save-dev jest @vue/test-utils@1.1.3

安装完成后配置script中的运行命令

// package.json
{
  "scripts": {
    "test": "jest"
  }
}

vue项目中需要处理vue单文件组件，为了告诉jest如果处理*.vue文件，需要安装vue-jest

npm install --save-dev vue-jest

安装完成后需要在jest.config.js中配置一下vue-jest。

可以使用npx jest --init将jest.config.js暴露出来，这里注意暴露出来的是jest.config.ts，以ts结尾的文件，里边是使用export default {}向外暴露的方式，如果我们项目使用的不是ts，那么需要将ts后缀改为js，将export default改为module.exports。

// jest.config.js文件
"moduleFileExtensions": [
  "js",
  "json",
  // 告诉 Jest 处理 `*.vue` 文件
  "vue"
],
  "transform": {
    // 用 `vue-jest` 处理 `*.vue` 文件
    ".*\.(vue)$": "vue-jest"
  }

如果你使用了 Babel 7 或更高版本，你需要在你的 devDependencies 里添加 babel-bridge

npm install --save-dev babel-core@^7.0.0-bridge.0

如果项目使用的是webpack并且项目中有别名，那么还需要处理webpack的别名

// jest.config.js文件
// 支持源代码中相同的 `@` -> `src` 别名
"moduleNameMapper": {
  "^@/(.*)$": "<rootDir>/src/$1"
}

尽管最新版本的 Node 已经支持绝大多数的 ES2015 特性，你可能仍然想要在你的测试中使用 ES modules 语法和 stage-x 的特性。为此我们需要安装 babel-jest

npm install --save-dev babel-jest

jest.config.js文件做相应的修改

// jest.config.js文件
"transform": {
  // 用 `babel-jest` 处理 js
  "^.+\.js$": "<rootDir>/node_modules/babel-jest"
}

配置到这里的时候，基本已经配置完成，但是当你去跑jest的时候会发现有如下报错，这是由于我们的jest是在node环境中跑的，需要兼容浏览器环境。

[vue-test-utils]: window is undefined, vue-test-utils needs to be run in a browser environment. 
You can run the tests in node using jsdom 
See https://vue-test-utils.vuejs.org/guides/#browser-environment for more details.

解决方式

//jest.config.js文件
setupFilesAfterEnv: ['<rootDir>jest.setup.js'],

新增jsdom jsdom-global两个包

yarn add --dev jsdom jsdom-global

根目录新增jest.setup.js

// jest.setup.js文件
require('jsdom-global')();

至此在vue2+composition-api项目中初始化jest已经完成，如若遇见问题，欢迎留言一起讨论。