我有一些ES 5示例项目，我想将其转换为ES6：
https://github.com/stefaneidelloth/testDemoES5
https://github.com/stefaneidelloth/testDemoES6
这些示例包括从类Baa继承的类Qux。

测试Qux时，我希望模拟Baa。

对于ES 5，我使用Squire.js模拟AMD模块依赖性，单元测试运行良好。
不幸的是，我找不到一个直接支持ES6（=“ECMAScript 2015 Language”，ES 2015）模块的测试框架。我们现在已经有了2020，仍然没有ES 2015的单元测试？我已经花了很多时间试图让这些测试工作...我的印象是，我的方法缺少了一些东西。
由于我找不到ES6测试的直接支持，我尝试坚持因果报应和使用webpack将ES6模块代码转换为ES 5 AMD模块进行测试。
让我们首先考虑将karma与requirejs和已转换为AMD模块的ES6代码结合使用。

答：如果我尝试用Squire模拟一个翻译后的类Baa（模块“src/baa”）......那就不再起作用了。Webpack将所有依赖项放在一个文件中并且当使用“src/qux”时，我注入的“src/baa”不会被考虑。

qux.test.js:

define([
    'squire'
], function (
    Squire
) { 

    describe('Qux', function(){

        var sut;        

        beforeEach(function(done){  

            var injector = new Squire();            
            injector.mock('src/baa', createBaaMock());

            injector.require([
                'src/qux'
            ], function(
                quxModule
            ){          
                var Qux = quxModule.default;    
                sut = new Qux('qux');
                done(); 
            }); 

        });

        it('quxMethod', function(){         
            expect(sut.quxMethod()).toEqual('quxMethod');
        }); 

        it('baaMethod', function(){         
            expect(sut.baaMethod()).toEqual('baaMockedMethod');
        }); 

        it('overridableMethod', function(){         
            expect(sut.overridableMethod()).toEqual('qux');
        });     

        function createBaaMock(){
            var BaaMock = function (name) {
                this.name = name;
            };
            BaaMock.prototype.baaMethod = function () {
                return 'baaMockedMethod';
            }

            var moduleMock = {
                default: BaaMock
            }
            return moduleMock;
        }       

    }); 

});

=〉我收到错误消息
'baaMethod'必须相等'baaMockedMethod'。
关于调试的更多信息.... ES 5的翻译有一个缺点，当调试测试时，在浏览器中运行的代码看起来和原始代码不同（默认情况下）。因此，可能的bug更难识别。这里的帮助是：

• 使用webpack模式“开发”而不是“生产”，以避免缩小
• 启用devtool option of webpack to enable source mapping，这样调试时原始代码也会显示在浏览器中。
  B.我尝试使用inject-loader，它是Squire.js的替代品，它了解webpack：https://github.com/LeanKit-Labs/inject-loader

然而，这似乎是一个CommonJs模块，它与我的karma + requirejs项目不兼容：
qux.test.js:

describe('Qux', function(){

    var sut;        

    beforeEach(function(done){  

       require(['inject!src/qux'],function(ModuleInjector){
           var quxModule = ModuleInjector({
          'src/baa': crateBaaMock()
        });

        var Qux = quxModule.default;        
        sut = new Qux('qux');

        done(); 
       });

    });

    it('quxMethod', function(){         
        expect(sut.quxMethod()).toEqual('quxMethod');
    }); 

    it('baaMethod', function(){         
        expect(sut.baaMethod()).toEqual('baaMockedMethod');
    }); 

    it('overridableMethod', function(){         
        expect(sut.overridableMethod()).toEqual('qux');
    });     

    function createBaaMock(){
        var BaaMock = function (name) {
            this.name = name;
        };
        BaaMock.prototype.baaMethod = function () {
            return 'baaMockedMethod';
        }

        var moduleMock = {
            default: BaaMock
        }
        return moduleMock;
    }       

});

=〉我收到错误消息
未捕获引用错误：未定义该模块
我也尝试了mock-loader，但没有得到它的工作。

**C.**我尝试不使用AMD模块，而是使用CommonJs模块作为webpack编译的目标。但是，我没有设法将commonjs预处理器和karma的webpack预处理器一起使用。
**D.**我尝试使用system.js而不是require.js，并使用Karma进行webpack。然而，karma-system.js依赖于一个非常旧的system.js版本（0.19.47），我无法让它正常工作。
E.在对related and old SO question的回答中，有人建议使用“import * as obj”样式以模块的形式导入类，然后监视默认导出以模拟该类。

但是，如果多个测试使用该“修改的模块”（不能重新定义属性“default”），则可能会导致问题。
由于webpack未动态加载依赖项，因此以下测试失败：

define([
    'src/baa',
    'src/qux'
],function(
    baaModule,
    quxModule
){

    describe('Qux', function(){

        var sut;        

        beforeEach(function(done){  

            baaModule.default = createBaaMock();

            var Qux = quxModule.default;        
            sut = new Qux('qux');

            done(); 

        });

        it('quxMethod', function(){         
            expect(sut.quxMethod()).toEqual('quxMethod');
        }); 

        it('baaMethod', function(){         
            expect(sut.baaMethod()).toEqual('baaMockedMethod');
        }); 

        it('overridableMethod', function(){         
            expect(sut.overridableMethod()).toEqual('qux');
        });     

        function createBaaMock(){
            var BaaMock = function (name) {
                this.name = name;
            };
            BaaMock.prototype.baaMethod = function () {
                return 'baaMockedMethod';
            }

            var moduleMock = {
                default: BaaMock
            }
            return moduleMock;
        }       

    }); 

});

总而言之，我发现了很多过时和不完整的ES6模块测试方法，但似乎没有一种方法能很好地解决问题。
**=〉**如果我应该继续使用karma，我需要如何修改我的test qux.test.js示例代码（可能还有我的配置文件）来正确地模拟类Baa？
=〉是否可以告诉webpack保持翻译后的模块分离，以便我可以轻松地用Squire.js注入依赖项？
**=〉**有没有更好的和最新的工作流程/框架来在浏览器中对ES6模块进行单元测试？有人试图将玩笑和因果联系起来吗？

相关内容：

• https://zirho.github.io/2016/06/06/karma-es6/
• How to mock dependencies for unit tests with ES6 Modules
• https://www.npmjs.com/package/inject-loader
• https://github.com/LeanKit-Labs/amd-inject-loader
• https://jestjs.io/显示器
• https://www.npmjs.com/package/proxyrequire
• ES6 unit testing without compilation
• Webpack: compile folder but keep separate files?
• https://www.reddit.com/r/javascript/comments/44vngp/es6_webpack_unittesting_i_need_help/
• How to disable bundling in Webpack for development?
• Disable Bundling from Webpack
• https://blog.oharagroup.net/mocking-es2015-imports-in-webpack-2-without-loaders-1dec44365989显示器