使用vue.js和vscode调试jest测试

Question

我使用的是vscode 1.69.2，当我在vue文件中设置断点并尝试调试jest测试时，我得到的断点显示在此编译代码中，而不是在我的源代码中。在链接的图像中，断点以与Source EventSummary相同的文件名打开。vue文件。

我想这是package.json中相关的部分

"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@babel/plugin-transform-modules-commonjs": "^7.18.2",
"@vue/cli-plugin-babel": "^5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-plugin-unit-jest": "~5.0.0",
"@vue/cli-service": "^5.0.0",
"@vue/compiler-sfc": "^3.0.0",
"@vue/test-utils": "^2.0.0-rc.17",
"@vue/vue3-jest": "^27.0.0",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-alias": "^1.1.2",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-vue": "^9.1.1",
"markdownlint-cli": "^0.31.1",
"mocked-env": "^1.3.5",
"node-sass": "^6.0.1",
"prettier": "^2.4.1",
"sass-loader": "^10.1.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"jest": {
"setupFiles": [
"<rootDir>/tests/env.js"
],
"preset": "@vue/cli-plugin-unit-jest",
"moduleNameMapper": {
"^.+\.css$": "<rootDir>/tests/css-stub.js",
"d3": "<rootDir>/node_modules/d3/dist/d3.min.js"
},
"moduleFileExtensions": [
"js",
"json",
"vue"
],
"transform": {
"^.+\.js$": "babel-jest",
"^.+\.vue$": "@vue/vue3-jest"
}

Launch.json

{
"configurations": [
{
"type": "node",
"name": "vscode-jest-tests.v2",
"request": "launch",
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"disableOptimisticBPs": true,
"cwd": "${workspaceFolder}",
"runtimeExecutable": "npm",
"args": [
"test",
"--",
"--runInBand",
"--watchAll=false",
"--testNamePattern",
"${jest.testNamePattern}",
"--runTestsByPath",
"${jest.testFile}"
]
}
]
}

vscode示例图片

Answer 1

配置jest.config.js -

transform: {
'^.+\.vue$': 'vue-jest',
'^.+\.tsx?$': 'ts-jest',
},

然后创建/更新您的启动。Json中包含以下内容-

"version": "0.2.0",
"configurations": [
{
"name": "jest-tests",
"type": "node",
"request": "launch",
"runtimeArgs": [
"--inspect-brk",
"./node_modules/@vue/cli-service/bin/vue-cli-service.js",
"test:unit",
"--runInBand"
],
"cwd": "${workspaceFolder}",
"console": "integratedTerminal",    
"internalConsoleOptions": "neverOpen",
"outFiles": [ "${workspaceFolder}/src/**/*.js"]
},
]

现在从VSCode调试选项卡中选择这个jest-tests并开始调试。