如何在VSCode中调试Jest+TypeScript测试？React项目配置求助

安全阿岳

2026-5-13

我之前刚好在用TypeScript-React-Starter搭建的项目里配置过VSCode调试Jest+Enzyme测试，踩过不少坑，整理了一套亲测有效的步骤，跟着来应该能解决你的问题：

第一步：先把基础依赖和Jest配置捋顺

首先得确保你的依赖和Jest配置是对的，基础错了后面调试肯定出问题：

检查package.json的devDependencies，确认包含这些包：jest、@types/jest、ts-jest（TypeScript项目必须）、enzyme、@types/enzyme，还有对应你React版本的Enzyme适配器——比如React 17/18用@wojtekmaj/enzyme-adapter-react-17或@wojtekmaj/enzyme-adapter-react-18（官方适配器已经停更了，这个社区维护的更靠谱）。如果缺的话，执行：
```
npm install --save-dev enzyme @types/enzyme @wojtekmaj/enzyme-adapter-react-17 ts-jest
```

在项目根目录创建jest.config.js，配置如下：

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom', // 模拟浏览器环境，适配React组件测试
  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'], // 加载Enzyme配置
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest', // 用ts-jest编译TypeScript测试文件
  },
  testMatch: ['**/__tests__/**/*.+(ts|tsx|js)', '**/?(*.)+(spec|test).+(ts|tsx|js)'],
};

在src目录下创建setupTests.ts，配置Enzyme适配器：

import { configure } from 'enzyme';
import Adapter from '@wojtekmaj/enzyme-adapter-react-17'; // 换成你对应React版本的适配器

configure({ adapter: new Adapter() });

第二步：配置VSCode的调试文件

接下来要给VSCode配置调试规则，让它能识别Jest测试：

在项目根目录创建.vscode/launch.json文件，粘贴以下内容：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "调试所有Jest测试",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/jest/bin/jest.js",
        "--runInBand",
        "--watchAll=false"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229,
      "env": {
        "TS_NODE_PROJECT": "${workspaceRoot}/tsconfig.json"
      }
    },
    {
      "name": "调试当前打开的Jest测试",
      "type": "node",
      "request": "launch",
      "runtimeArgs": [
        "--inspect-brk",
        "${workspaceRoot}/node_modules/jest/bin/jest.js",
        "--runInBand",
        "${relativeFile}"
      ],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "port": 9229,
      "env": {
        "TS_NODE_PROJECT": "${workspaceRoot}/tsconfig.json"
      }
    }
  ]
}

这里两个配置：一个是跑所有测试，另一个是只跑当前打开的测试文件，后者日常调试更实用。

第三步：开始调试操作

配置完就可以上手调试了：

打开你要调试的测试文件（比如src/__tests__/App.test.tsx），在需要暂停的代码行左侧点击行号，添加红色断点。
打开VSCode左侧的「运行和调试」面板（快捷键Ctrl+Shift+D），选择「调试当前打开的Jest测试」，点击绿色启动按钮。
程序会自动停在你设置的断点处，这时可以用调试工具栏的按钮（继续、单步跳过、单步进入等）控制执行，还能在侧边栏查看变量、调用栈信息。

常见坑点排查

如果还是报错，可以检查这几点：

断点不命中：确认tsconfig.json里的sourceMap设为true，Jest需要source map才能把TypeScript代码映射到编译后的JS。
适配器报错：确保装的适配器版本和你的React版本完全匹配，比如React 18就不能用17的适配器。
类型错误：如果出现类型不兼容，试试删除node_modules和package-lock.json，重新执行npm install，有时候依赖版本冲突会导致奇怪的问题。

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