如何使用Jest（ts-jest）测试带命名空间的TypeScript代码？

问题描述 #

我尝试测试一段带有命名空间的TypeScript代码：

namespace MainNamespace {
  export class MainClass {
    public sum(a: number, b: number): number {
      return a + b;
    }
  }
}

测试代码用JavaScript编写如下：

describe("main test", () => {
  it("sum test", () => {
    var mainClass = new MainNamespace.MainClass();
    expect(mainClass.sum(3, 2)).toEqual(5);
  })
})

运行测试时遇到错误：ReferenceError: MainNamespace is not defined，请问该如何解决？

解决方案 #

别担心，这个问题主要是测试文件与源文件的编译环境不匹配，加上Jest未正确处理TypeScript命名空间导致的，下面是一步步的解决方法：

• 将测试文件改为TypeScript格式
  把测试文件的后缀从.js改成.ts，这样ts-jest可以将测试文件和源文件一起编译，确保命名空间能被正确识别。修改后的测试文件如下：

  describe("main test", () => {
    it("sum test", () => {
      const mainClass = new MainNamespace.MainClass();
      expect(mainClass.sum(3, 2)).toEqual(5);
    });
  });
  

• 确保TypeScript配置（tsconfig.json）正确
  检查你的tsconfig.json，确保关键配置项符合Jest的运行要求：

  {
    "compilerOptions": {
      "target": "ES6",
      "module": "CommonJS", // Jest运行在Node环境，需要CommonJS模块规范
      "declaration": true,
      "outDir": "./dist",
      "strict": true
    },
    "include": ["src/**/*", "__tests__/**/*"] // 包含源文件和测试文件的路径
  }
  

• 配置Jest使用ts-jest预设
  先确保你已经安装了必要依赖：

  npm install --save-dev ts-jest @types/jest
  

  然后创建或修改jest.config.js文件，配置如下：

  module.exports = {
    preset: 'ts-jest',
    testEnvironment: 'node',
    roots: ['<rootDir>/src', '<rootDir>/__tests__'],
    transform: {
      '^.+\\.tsx?$': 'ts-jest'
    },
    testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
    moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node']
  };
  

• 确保命名空间能被测试文件访问
  如果你的TypeScript文件是作为模块使用的（文件中有import/export语句），需要将整个命名空间导出：

  export namespace MainNamespace {
    export class MainClass {
      public sum(a: number, b: number): number {
        return a + b;
      }
    }
  }
  

  然后在测试文件中导入使用：

  import { MainNamespace } from '../src/your-file-name';
  
  describe("main test", () => {
    it("sum test", () => {
      const mainClass = new MainNamespace.MainClass();
      expect(mainClass.sum(3, 2)).toEqual(5);
    });
  });
  

如果你的命名空间是全局的（无模块导出），可以在tsconfig.json中设置"module": "none"让编译后的代码挂载到全局对象，但更推荐使用模块方式的命名空间，这更符合现代TypeScript的最佳实践。

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