之前项目测试都是导师配的，这下扔给我一个单测，啥也没有，从配置开始。网上关于jest配置啥的资源要不没说清楚，要不数清楚了也不敢用，重点还是能查到的贼少（PS：谷歌搜索着实比百度好用个人感觉）
那就从0开始首先基础配置走起来，甩个链接，把基础配置起来：https://vue-test-utils.vuejs.org/installation/#semantic-versioning
1、基础配置：jest相关配置选项，按需取
module.exports = {
preset: '@vue/cli-plugin-unit-jest',
//设置输出报告
collectCoverage: true,
//要覆盖报告的文件，这玩意儿加上去所有文件都给你来份报告，贼恐怖，应该还是正则匹配写的不对，最好还是别用
collectCoverageFrom: ["**/*.{js,vue}", "!**/node_modules/**"]
//报告输出路径
coverageDirectory: 'dist/tests',
//告诉jest要处理哪些文件
moduleFileExtensions: [
'js',
'json',
'vue',
],
//对于jest而言，很多文件都是解析不了的，这时候就需要用到翻译官，大致意思就是.vue文件使用vue-jest转译
transform: {
'.*\\.(vue)$': 'vue-jest',
'^.+\\.[t|j]sx?$': 'babel-jest',
},
//别名设置，避免使用‘../../../../’这种东西
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
},
};
关于babel他的功能可以看下babel官方文档：https://www.babeljs.cn/docs/index.html
好了官方给出的就这么多，然而，根本不够用
1、jest不支持ES6语法，添加预设babel/preset-env和babel/plugin-transform-runtime插件
//babel.config.js
module.exports = {
presets: [
'@babel/preset-env',
'@vue/cli-plugin-babel/preset',
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: name => `${name}/style/less`,
}, 'vant'],
['@babel/plugin-transform-runtime'],
],
};
2、可以看到项目里使用了vant插件，在babel.config.js中配置了vant，然鹅，jest也不支持，添加配置transformIgnorePatterns
在这儿找的，找起来真难
// jest 默认忽略对 node_modules 的转换解析，我们项目中有使用到 vant 等包，所以不能忽略
// 这里随便写一个资源路径进行覆盖
transformIgnorePatterns: ['/src/assets'],//直接给忽略掉，这里在网上找的
3、静态资源解析,项目中不可避免会引入CSS和图片等静态资源，jest仍然解析不了，mock掉。疯了，jest咋啥也解析不了，配置个东西都找好久
不明白看这里，是个好东西
根目录下建个mock文件夹
image.png
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
"\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
}
以上就是我踩过的坑，千辛万苦找来的配置，最后来个完整的
//babel.config.js
module.exports = {
presets: [
'@babel/preset-env',
'@vue/cli-plugin-babel/preset',
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: name => `${name}/style/less`,
}, 'vant'],
['@babel/plugin-transform-runtime'],
],
};
//jest.config.js
module.exports = {
preset: '@vue/cli-plugin-unit-jest',
collectCoverage: true,
coverageDirectory: 'dist/tests',
moduleFileExtensions: [
'js',
'json',
'vue',
],
transform: {
'.*\\.(vue)$': 'vue-jest',
'^.+\\.[t|j]sx?$': 'babel-jest',
},
transformIgnorePatterns: ['/src/assets'],
moduleNameMapper: {
'\\.(css|less|sass|scss)$': '<rootDir>/__mocks__/styleMock.js',
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
'^@/(.*)$': '<rootDir>/src/$1',
},
};
//fileMock.js
module.exports = 'test-file-stub';
//styleMock.js
module.exports = {};
估计还没完，继续踩坑之路
