在Visual Studio代码调试器中使用Jest时如何配置源映射

在使用Visual Studio Code（VS Code）进行Jest测试时，配置源映射是非常重要的步骤，它可以帮助你在调试过程中正确地链接到源代码而不是编译后的代码。下面是配置源映射的步骤：

1. 安装必要的扩展

首先确保你已经安装了Jest相关的VS Code扩展，比如官方的Jest扩展。这些扩展通常会帮助我们更方便地集成和使用Jest。

2. 创建Jest配置文件

在项目根目录下创建一个Jest配置文件（如果还没有的话），比如jest.config.js。在这个配置文件中，你需要确保启用了sourceMap支持。这通常会默认开启，但最好确认一下。

javascript
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
  // 确保 sourceMap 是开启的
  globals: {
    'ts-jest': {
      diagnostics: false,
      tsconfig: 'tsconfig.json'
    }
  }
};

3. 配置VS Code的调试设置

接下来，你需要在VS Code中配置调试设置。在项目的.vscode文件夹中创建或编辑launch.json文件。这个文件告诉VS Code如何启动调试器和与Jest交互。

json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Jest Tests",
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": ["--runInBand", "--config=jest.config.js"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "disableOptimisticBPs": true,
      "windows": {
        "program": "${workspaceFolder}/node_modules/jest/bin/jest.js"
      },
      "sourceMaps": true,
      "smartStep": true,
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}

4. 确保TypeScript配置正确

如果你的项目使用TypeScript，确保tsconfig.json中也开启了sourceMap。这样，TypeScript编译器生成JavaScript代码时会附带source map。

json
{
  "compilerOptions": {
    "sourceMap": true,
    // 其他配置...
  }
}

5. 开始调试

配置好所有这些之后，你可以在VS Code中设置断点，然后从调试面板选择"Debug Jest Tests"配置开始调试。现在，当Jest测试运行到断点时，VS Code将能够使用source map正确地映射到TypeScript源代码。

例子说明：

假设你在一个计算两数之和的函数中设置了断点，函数定义如下：

typescript
function add(a: number, b: number): number {
  return a + b;
}

test('adds 1 + 2 to equal 3', () => {
  expect(add(1, 2)).toBe(3);
});

在add函数的返回语句上设置断点，使用上述配置的测试调试启动后，VS Code能够在TypeScript文件中正确停在断点位置，而不是编译后的JavaScript文件中。

通过以上步骤，你可以有效地在VS Code中使用Jest进行源代码级的调试，这将极大地提高开发和调试的效率。