vscode-jest 在 Typescript 源文件中带有 ts-jest 断点

Question

我有一个TypeScript项目，正在通过ts-jest使用Jest进行测试。在VS Code中，我安装了插件vscode-jest。调试没有像我希望的那样工作：

• 我可以通过单击 vscode-jest 生成的DebugCodeLens 来启动调试会话
• 如果我在测试代码中放置断点，调试器将按预期在断点处暂停
• 但是如果我在源代码中放置断点，调试器将忽略它

我想这是因为 ts-jest 的工作方式。可能永远不会找到断点，因为测试是在 JS 文件而不是 TS 文件上运行的。

如果我在使用 Create React App 引导的 JS 项目中尝试相同的操作，我可以在源文件中设置断点，调试器将停止。这很有趣，因为这些源文件也是由 babel 编译的......

我想知道是否可以调整我的设置，以便调试器识别源文件中的断点。

在下面发布一些可能相关的文件：

jest.config.js

module.exports = {
transform: {
'^.+\.tsx?$': 'ts-jest',
},
testRegex: '(/__tests__/.*|(\.|/)(test|spec))\.(jsx?|tsx?)$',
testPathIgnorePatterns: ['/dist/', '/node_modules/'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
collectCoverage: false,
};

tsconfig.json

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"declaration": true,
"outDir": "./dist",
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noUnusedLocals": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"esModuleInterop": true,
"sourceMap": true,
"watch": false
},
"include": ["src"],
"compileOnSave": true
}

Answer 1

嗯，我和你一样，但我能够在源代码和测试代码上设置断点。 请注意，即使 vscode 在源代码上将我的断点标记为"未验证"，当到达它们时，它会正确停止。

我将把我的配置传递给你：

tsconfig.json：

{
"compilerOptions": {
"target": "es5",
"outDir": "build",
"module": "commonjs",
"strict": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"suppressImplicitAnyIndexErrors": true,
"removeComments": true,
"allowJs": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"forceConsistentCasingInFileNames": true,
"noEmitOnError": true,
"typeRoots": [
"./node_modules/@types",
"./types"
],
"lib": [
"es5",
"es6",
"dom",
"scripthost"
],
"traceResolution": false,
"listEmittedFiles": false,
"listFiles": false,
"pretty": true,
},
"exclude": [
"node_modules/**/*.*",
"build/**/*.*"
],
"include": [
"src/**/*.ts",
"test/**/*.test.ts",
"demo/**/*.ts"
],
}

jest.config.js

module.exports = {
globals: {
'ts-jest': {
tsConfigFile: 'tsconfig.jest.json'
},
"__TRANSFORM_HTML__": true
},
moduleFileExtensions: [
'ts',
'js'
],
transform: {
"^.+\.(ts|html)$": "ts-jest",
"^.+\.xml$": "<rootDir>/tools/xmlTransformer.js",
},
clearMocks: true,
resetMocks: true,
restoreMocks: true,
collectCoverage: true,
"collectCoverageFrom": [
"**/src/**/*.ts"
],
coverageDirectory: 'coverage',
coverageReporters: [
'lcov'
],
// "coverageThreshold": {
//     "global": {
//         "branches": 80,
//         "functions": 80,
//         "lines": 80,
//         "statements": 80
//     }
// },
testEnvironment: 'jsdom',
testMatch: [
'**/test/unit/**/*.test.ts'
],
setupTestFrameworkScriptFile: 'jest-mock-console/dist/setupTestFramework.js'
};

---

编辑：如何在调试模式下启动笑话？