VS Code中React测试用例自动导入使用require语法如何解决

开发者阿泽

2026-10-5

问题成因

VS Code 内置负责代码提示、自动导入的 TypeScript 语言服务会根据项目配置推断导入语法，你遇到的问题由核心配置缺失导致：

你的 jsconfig.json 未显式指定模块规范，语言服务默认按 CommonJS 规范生成 require 语法的导入语句
现有 jsconfig.json 的 include 字段仅覆盖 src 目录，如果你将测试用例放在项目根目录的 __tests__ 文件夹下，这套配置不会对测试文件生效
项目未在 package.json 中声明模块规范，Node 环境默认将 .js 文件识别为 CommonJS 模块

解决方案

按照以下步骤调整配置即可：

升级 jsconfig.json 配置，补充模块相关参数，同时覆盖测试文件路径：

{
  "compilerOptions": {
    "baseUrl": "src",
    "module": "ESNext",
    "target": "ES6",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src",
    "**/*.test.js",
    "**/*.spec.js",
    "__tests__/**/*"
  ]
}

各新增参数作用说明：

module: "ESNext"：显式指定项目使用 ES Module 规范，自动导入会优先生成 import 语法
allowSyntheticDefaultImports: true：兼容无默认导出的 CommonJS 依赖的导入写法，避免自动导入时出现 .default 冗余代码
扩展后的 include 字段会覆盖所有测试用例文件，确保测试文件也应用这套配置

（可选，仅适用于 Node 12+ 项目）在项目根目录的 package.json 中新增 "type": "module" 字段，明确所有 .js 文件默认按 ES Module 处理。
（可选，全局生效配置）打开 VS Code 设置，搜索 JavaScript › Preferences: Import Module Syntax，选择 esModule 作为默认导入语法。
配置修改完成后，按 Ctrl+Shift+P（Mac 系统按 Cmd+Shift+P）调出命令面板，执行 TypeScript: Restart TS Server 重启语言服务，后续自动导入就会默认生成 ES Module 格式的 import 语句。