jest-配置以及遇到的问题

之前项目测试都是导师配的，这下扔给我一个单测，啥也没有，从配置开始。网上关于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 = {};

估计还没完，继续踩坑之路