打字稿源文件中带有 ts-jest 断点的 vscode-jest

Posted 2023-03-13

【中文标题】打字稿源文件中带有 ts-jest 断点的 vscode-jest

【英文标题】：vscode-jest with ts-jest breakpoints in typescript source files

【发布时间】：2018-12-10 10:59:06

【问题描述】：

我有一个 TypeScript 项目，我通过 ts-jest 使用 Jest 进行测试。在 VS Code 中，我安装了插件 vscode-jest。调试并不如我所愿：

我可以通过单击由 vscode-jest 生成的Debug CodeLens 来启动调试会话 如果我在

test

代码中设置断点，调试器将按预期在断点处暂停

但是

如果我在

源代码

代码中设置断点，调试器会忽略它

我猜这是因为 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

【问题讨论】：

你成功了吗？

【参考方案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'
;

---

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

【讨论】：

感谢您的回复。很可能是某个版本的依赖项导致了我的问题。我最近能够逐步完成所有事情。您的 EDIT 询问您将如何在调试模式下启动 Jest，而我的问题是关于 vscode-jest，所以我假设您想知道如何使用此插件进行调试。我只需单击将出现在失败测试上的“调试”链接即可。要启动与 vscode-jest 无关的调试会话，您必须进行 launch.json 配置并以此启动调试会话。

好吧，不，我问的是在调试模式下启动 jest 只是因为它是你没有指定的孤独的东西，所以我在想 jest 启动参数中缺少一些东西（例如, runInBand 参数)