如何通过VSCode测试注解运行Mocha测试？解决.ts扩展名错误

我有一个使用Mocha作为测试运行器的TypeScript项目，npm run test命令可正常运行测试，VSCode的Mocha Test Explorer插件也能正常执行，但点击VSCode测试注解中的Run Test或Debug Test选项时无法运行，抛出如下错误：

node_modules/.bin/mocha test/always.passing.spec.ts --grep="These\stests" 

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/stw/Code/keep-node-sdk/test/always.passing.spec.ts
    at new NodeError (node:internal/errors:405:5)
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:99:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:142:36)
    at defaultLoad (node:internal/modules/esm/load:91:20)
    at DefaultModuleLoader.load (node:internal/modules/esm/loader:263:26)
    at DefaultModuleLoader.moduleProvider (node:internal/modules/esm/loader:179:22)
    at new ModuleJob (node:internal/modules/esm/module_job:63:26)
    at #createModuleJob (node:internal/modules/esm/loader:203:17)
    at DefaultModuleLoader.getJobFromResolveResult (node:internal/modules/esm/loader:156:34)
    at DefaultModuleLoader.getModuleJob (node:internal/modules/esm/loader:141:17)
    at DefaultModuleLoader.import (node:internal/modules/esm/loader:227:28)
    at importModuleDynamically (node:internal/modules/cjs/loader:1163:37)
    at importModuleDynamicallyWrapper (node:internal/vm/module:428:21)
    at importModuleDynamically (node:internal/vm:105:46)
    at importModuleDynamicallyCallback (node:internal/modules/esm/utils:87:14)
    at exports.doImport (/Users/stw/Code/keep-node-sdk/node_modules/mocha/lib/nodejs/esm-utils.js:35:34)
    at formattedImport (/Users/stw/Code/keep-node-sdk/node_modules/mocha/lib/nodejs/esm-utils.js:9:28)
    at exports.requireOrImport (/Users/stw/Code/keep-node-sdk/node_modules/mocha/lib/nodejs/esm-utils.js:42:34)
    at exports.loadFilesAsync (/Users/stw/Code/keep-node-sdk/node_modules/mocha/lib/nodejs/esm-utils.js:100:34)
    at Mocha.loadFilesAsync (/Users/stw/Code/keep-node-sdk/node_modules/mocha/lib/mocha.js:447:19)
    at singleRun (/Users/stw/Code/keep-node-sdk/node_modules/mocha/lib/cli/run-helpers.js:125:15)
    at exports.runMocha (/Users/stw/Code/keep-node-sdk/node_modules/mocha/lib/cli/run-helpers.js:190:10)
    at exports.handler (/Users/stw/Code/keep-node-sdk/node_modules/mocha/lib/cli/run.js:370:11)
    at /Users/stw/Code/keep-node-sdk/node_modules/yargs/build/index.cjs:443:71

当前配置 #

mocharc.js #

'use strict';

module.exports = {
  spec: ['test/**/*.spec.ts'],
};

package.json 脚本 #

{
  "scripts": {
    "dev": "ts-node-dev --respawn --pretty --transpile-only src/index.ts",
    "build": "tsc",
    "postbuild": "npm run test",
    "prepublish": "npm run build",
    "start": "node .",
    "test": "nyc --reporter=html --reporter=text mocha -r ts-node/register test/**/*.spec.ts"
  }
}

VSCode 设置 #

{
  "mochaExplorer.files": "test/**/*.ts",
  "mochaExplorer.require": "ts-node/register",
  "mochaExplorer.logpanel": true,
  "mocha-snippets.function-type": "arrow",
  "testExplorer.onStart": "reset",
  "testExplorer.showOnRun": true,
  "testExplorer.useNativeTesting": true,
  "testExplorer.addToEditorContextMenu": true,
}

问题原因与修复 #

错误核心是Node无法识别.ts扩展名，本质是点击注解的Run/Debug时，VSCode没有正确加载ts-node/register转译器。可以通过以下几种方式修复：

• 方案1：修改VSCode设置，添加环境变量
  在VSCode配置中新增mochaExplorer.env，指定TypeScript配置文件路径：

  {
    // 保留原有设置，新增以下内容
    "mochaExplorer.env": {
      "TS_NODE_PROJECT": "./tsconfig.json"
    }
  }
  

• 方案2：在mocharc.js中全局配置require
  把ts-node的注册配置直接写入Mocha的全局配置文件，替代VSCode设置里的mochaExplorer.require：

  'use strict';
  
  module.exports = {
    spec: ['test/**/*.spec.ts'],
    require: 'ts-node/register' // 新增这行
  };
  

• 方案3：检查tsconfig.json配置
  确保你的TypeScript编译配置支持CommonJS模块，避免ES模块与CommonJS冲突：

  {
    "compilerOptions": {
      "module": "CommonJS",
      "target": "ES6",
      "esModuleInterop": true
    }
  }
  

原理：点击单个测试的Run/Debug时，Mocha Test Explorer会生成独立的运行命令，此时不会自动继承npm脚本里的-r ts-node/register参数。通过全局配置require或指定TS配置文件，能确保每次运行都加载转译器，让Node能识别并处理.ts文件。

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