Jest with Vue3 ERROR: Cannot destructure property 'config' of 'undefined' as it is undefined.

[fallen-leaves-FE]

The error message is as follows：

tests/Button/button.spec.ts
● Test suite failed to run

TypeError: Cannot destructure property 'config' of 'undefined' as it is undefined.

  at Object.getCacheKey (node_modules/vue-jest/lib/index.js:10:7)
  at ScriptTransformer._getCacheKey (node_modules/@jest/transform/build/ScriptTransformer.js:280:41)
  at ScriptTransformer._getFileCachePath (node_modules/@jest/transform/build/ScriptTransformer.js:351:27)
  at ScriptTransformer.transformSource (node_modules/@jest/transform/build/ScriptTransformer.js:588:32)
  at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:758:40)
  at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:815:19)

And my jest.config.js code:

{
preset: 'ts-jest',
testEnvironment: 'jsdom',
moduleFileExtensions: ['ts', 'js', 'tsx', 'jsx', 'json', 'vue'],
transform: {
'^.+\.vue$': 'vue-jest',
'.+\.(css|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
'^.+\.jsx?$': '/node_modules/babel-jest',
'^.+\.js$': '/node_modules/babel-jest'
},
snapshotSerializers: ['jest-serializer-vue'],
moduleNameMapper: {
'^@/(.)$': '/packages/$1'
},
testMatch: [
'/tests//.spec.(ts|tsx|js|jsx)'
],
verbose: true,
collectCoverage: true,
collectCoverageFrom: [
'/packages//*.{ts,tsx,js,jsx,vue}'
]
}

package.json

"devDependencies": {
"@rollup/plugin-node-resolve": "^13.0.0",
"@types/jest": "^26.0.23",
"@typescript-eslint/eslint-plugin": "^4.25.0",
"@typescript-eslint/parser": "^4.25.0",
"@vue/compiler-sfc": "^3.0.11",
"@vue/test-utils": "^2.0.0-rc.6",
"autoprefixer": "^9.8.6",
"cross-env": "^7.0.3",
"esbuild": "^0.12.5",
"eslint": "^7.27.0",
"eslint-plugin-vue": "^7.10.0",
"jest": "^27.0.4",
"jest-serializer-vue": "^2.0.2",
"jest-transform-stub": "^2.0.0",
"node-sass": "^6.0.0",
"postcss": "^8.2.14",
"postcss-import": "^14.0.1",
"postcss-minify": "^1.1.0",
"postcss-preset-env": "^6.7.0",
"pre-commit": "^1.2.2",
"rimraf": "^3.0.2",
"rollup": "^2.47.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-esbuild": "^4.2.3",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-postcss": "^4.0.0",
"rollup-plugin-replace": "^2.2.0",
"rollup-plugin-scss": "^2.6.1",
"rollup-plugin-serve": "^1.1.0",
"rollup-plugin-vue": "^6.0.0",
"ts-jest": "^27.0.2",
"typescript": "^4.2.4",
"vue-jest": "^5.0.0-alpha.10"
},
"dependencies": {
"vue": "^3.0.11"
}

[biaov]

应该是插件版本冲突，把 jest^27 和 ts-jest^27 改为 jest^26 和 ts-jest^26 即可

[whq920729]

应该是插件版本冲突，把 jest^27 和 ts-jest^27 改为 jest^26 和 ts-jest^26 即可

good , it works for me

[bearguns]

Also experiencing this issue with jest ^27 and ts-jest ^27. Those versions are required for me to test the api client functions in our application which are written in TypeScript, but now I cannot test our Vue components with vue-test-utils.

[lmiller1990]

Jest 27 has breaking changes. We are working on support and discussing it here: #343

If you feel strongly about this, we could sure use some help in reorganizing this repo so support Vue 3, Jest 27, etc. Please see #343 for more information.

If you need a fix right now, you could just use Jest 26.