无需修改原文件，如何为无导出的JavaScript类编写单元测试？

方案1：利用测试框架的浏览器环境捕获全局类 #

这类无导出的静态类在浏览器环境下会挂载到window全局对象上，我们可以借助测试框架的浏览器模拟能力直接调用：

• 配置测试环境为浏览器环境：比如Jest中在jest.config.js设置testEnvironment: 'jsdom'，Mocha则引入jsdom-global包
• 在测试文件中按依赖顺序加载原JS文件，此时类会自动成为全局对象
• 直接通过window.xxx调用静态方法编写测试用例

示例测试代码（Jest）：

// 按依赖顺序加载原文件
require('../src/Utils.js');
require('../src/Importer.js');
require('../src/Exporter.js');

test('Utils的format方法测试', () => {
  expect(window.Utils.format('test')).toBe('formatted-test');
});

test('Importer的parse方法测试', () => {
  expect(window.Importer.parse('sample-data')).toEqual({ key: 'value' });
});

方案2：新增gulp测试专用构建任务 #

基于原项目的gulp合并流程，新增一个仅用于测试的构建任务，自动给每个文件追加导出语句，完全不改动原文件：

• 安装gulp-replace插件用于文本替换
• 在gulpfile.js中新增任务，处理每个JS文件时，在类定义末尾追加导出语句
• 生成测试专用的bundle文件，测试时直接引入该bundle即可正常导入类

示例gulp任务代码：

const gulp = require('gulp');
const replace = require('gulp-replace');
const concat = require('gulp-concat');

// 测试专用构建任务
gulp.task('build-test-bundle', () => {
  return gulp.src(['src/Utils.js', 'src/Importer.js', 'src/Exporter.js'])
    // 匹配类定义并追加导出语句
    .pipe(replace(/class (\w+) {[\s\S]*?}$/, (match, className) => {
      return `${match}\nexport { ${className} };`;
    }))
    .pipe(concat('test-bundle.js'))
    .pipe(gulp.dest('test/dist'));
});

运行gulp build-test-bundle生成测试bundle后，测试文件中即可正常导入：

import { Utils, Importer } from './dist/test-bundle.js';

test('Utils工具方法验证', () => {
  expect(Utils.calculate(1,2)).toBe(3);
});

方案3：创建测试代理模块 #

为每个原文件编写一个仅用于测试的代理模块，通过加载原文件捕获全局类后导出，完全隔离测试逻辑与原代码：

• 比如创建Importer.test-proxy.js：

// 加载原文件，使其类挂载到window
require('../src/Importer.js');
// 导出全局的Importer类
module.exports = window.Importer;

• 测试文件中直接引入代理模块即可：

const Importer = require('./Importer.test-proxy.js');

test('Importer导入功能测试', () => {
  const result = Importer.importFile({ mock: 'data' });
  expect(result.success).toBe(true);
});

注意事项 #

• 确保原文件的加载顺序与gulp生产环境的合并顺序一致，避免依赖未定义的问题
• 如果使用Jest，若遇到全局对象未挂载的情况，可以在setupFilesAfterEnv中统一加载所有原文件

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