jest.js问题之旅 – 源码巴士

ps:希望能为你们的问题带来解决的办法。
背景：
小组任务，在目前自己所负责的项目中使用jest.js进行单元测试。

遇到的问题：
根据官网在安装了jest.js的依赖包后，原有的项目不能运行，并出现一大堆的有关于依赖的错误。并且jest测试也不能运行起来。

问题解决时间线：
在反复安装移除依赖包后，将问题定位到jest的版本上，但不确定是不是由于babel的版本所造成的，直到现在也没确定，因为现有项目所使用的babel版本仅为6.x，而官方文档中，最新的jest所匹配的babel版本为7.x。所以最后又两个办法可以解决这个问题，要么升级babel的版本到最新版本，要么降低jest的版本。
在升级babel版本后，出现了更多的不知名错误，然后就放弃了这个办法。然后依照官方文档的指示，锁定jest的版本到低版本，同样的，也是报错，但是项目没有报错了。（那我就不动babel咯）
没办法了，去找了以下相似的项目中有关于jest的配置，发现需要安装对应jest版本的jest-cli依赖，
在安装的之后，jest测试能够跑起来了，项目也没问题了，奈斯
但是新的问题来了，我现有的项目使用的是ts，也就是说，我的jest单元测试还必须要配置对ts的支持，最开始根据官方的指示去安装@babel/preset-typescript，但同样的，我的Babel版本并不支持我使用这个Babel预设，在配置文件中配置了这个预设之后，就会报版本不匹配的错。

Requires Babel “^7.0.0-0”, but was loaded with “6.26.3”. If you are
sure you have a compatible version of @babel/core, it is likely that
something in your build process is loading the wrong version. Inspect
the stack trace of this error to look for the first entry that doesn’t
mention “@babel/core” or “babel-core” to see what is calling Babel.

基于上面的问题，我又去到官方文档中找解决的办法，官方文档中有提到可以改用ts-jest，然后我又去下载ts-jest，因为我安装的jest的版本为20.0.0，基于前面版本的问题，所以我想到了要下载对应版本的ts-jest，就在我下载了对应版本的ts-jest并配置了之后，运行jest，jest报错：

Jest: a transform must export a process function.

这个transfrom就是我刚刚配置的用来转换ts的ts-jest，遇到问题，找百度，然后我发现没有什么人遇到这个问题，就一两个英文的网站中有提到，不过还好，我在其中发现了关键，提升ts-jest的版本，
怀着试一试的态度，就在项目中升级了依赖包，升级到了22.0.0，同时也将jest和jest-cli的版本进行了升级，终于，项目跑起来了。然后呢问题又出现了22.0.0版本的jest对比起最新版本的jest好像缺少了方法，所以最后我又把所有的与jest有关的包升级到了23.0.0。至此，问题解决，项目也没有报错了。

以下是我项目中的现有配置：

package.json
"scripts":{
    ...
    "test": "jest --config test/unit/jest.conf.js",//--congig后面是我的jest配置文所在的位置。
    ...
}
"devDependencies"：{
    ...
    "jest": "23.0.0",
    "jest-cli": "23.0.0",
    "ts-jest": "23.0.0",
    "babel-core": "^6.22.1",
    "babel-preset-env": "^1.3.2",
    "babel-jest": "20.0.0",
    ...
}

.babelrc//这个可以不用看，只是我项目中的配置
{
  "presets": [
    ["env", {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"],
        "node": "current"
      },
      "useBuiltIns": true
    }],
    "stage-2"
  ],
  "plugins": ["transform-vue-jsx", "transform-runtime", "transform-decorators-legacy"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["transform-vue-jsx", "istanbul"]
    }
  }
}

jest.conf.js

const path = require('path')
module.exports = {
  verbose: true,
  testURL: 'http://localhost/',
  rootDir: path.resolve(__dirname, '../../'),
  moduleFileExtensions: [
    'js',
    'json',
    'vue',
    'ts'
  ],
  moduleNameMapper: {
    '^@\/(.*?\.?(js|vue)?|)$': '<rootDir>/src/$1', // @路径转换，例如：@/components/Main.vue -> rootDir/src/components/Main.vue
    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/test/unit/__mocks__/fileMock.js', // 模拟加载静态文件
    '\\.(css|less|scss|sass)$': '<rootDir>/test/unit/__mocks__/styleMock.js'　　// 模拟加载样式文件
  },
  testMatch: [ // 匹配测试用例的文件
    '<rootDir>/test/unit/specs/*.spec.(ts|js)'
  ],
  transform: {
    '^.+\\.jsx?$': '<rootDir>/node_modules/babel-jest',
    '^.+\\.tsx?$': '<rootDir>/node_modules/ts-jest'//增加ts的转换
  },
  testPathIgnorePatterns: [
    '<rootDir>/test/e2e'
  ],
  coverageDirectory: '<rootDir>/test/unit/coverage', // 覆盖率报告的目录
  collectCoverageFrom: [ // 测试报告想要覆盖那些文件，目录，前面加！是避开这些文件
    // '!src/main.js',
    // '!src/router/index.js',
    // '!**/node_modules/**'
  ]
}

原文链接：https://blog.csdn.net/weixin_43821171/article/details/120365986