使用karma-typescript运行测试出现SourceMap position not found for trace报错如何解决

1. 移除多余的sourcemap预处理器 #

karma-typescript本身会完整处理TS/TSX转译过程中的SourceMap传递，额外添加的sourcemap预处理器会打乱它内部的SourceMap链路，导致SourceMap匹配失败。修改karma.conf.js的preprocessors配置：

preprocessors: {
    "**/*.ts": ["karma-typescript"],
    "**/*.tsx": ["karma-typescript"]
},

同时可以把plugins里的karma-sourcemap-loader也删除，不需要继续使用。

2. 关闭增量编译配置 #

TS的增量编译（incremental）和karma-typescript不兼容，会破坏SourceMap生成逻辑，二选一修改即可：

• 直接修改tsconfig.json里的incremental为false
• 在karma.conf.js的karmaTypescriptConfig.compilerOptions里覆盖配置，避免影响日常开发：

karmaTypescriptConfig: {
    compilerOptions: {
        target: "ES2017",
        lib: ['DOM', 'ES2015', 'ES2017'],
        module: "CommonJS",
        incremental: false // 追加这行覆盖tsconfig配置
    },
    // 其余原有配置保持不变
}

3. 开启报告器的SourceMap支持 #

mocha报告器默认不会自动读取karma-typescript生成的SourceMap，需要手动开启配置，在karma.conf.js里追加：

config.set({
    // 原有配置不变
    mochaReporter: {
        sourcemap: true
    }
})

4. 修复第三方依赖找不到的问题 #

报错里的Can't find @react/react-spectrum/Button是因为karma-typescript默认不会处理node_modules下的第三方ESM格式包，需要在karmaTypescriptConfig.bundlerOptions里添加对应的包跳过解析：

bundlerOptions: {
    exclude: ["@react/react-spectrum"],
    // 其余原有acornOptions、transforms配置保持不变
}

5. 修正文件匹配规则 #

当前的files配置会排除所有.spec后缀的测试文件，导致测试用例无法被正常加载，调整为：

files: [
    { pattern: "src/**/*.ts" }, 
    { pattern: "src/**/*.tsx" }
],
exclude: [
    "src/**/*.integration.spec.ts",
    "src/**/*.integration.spec.tsx"
]

内容的提问来源于stack exchange，提问作者Raushan