未捕获的错误：不匹配的匿名define（）模块混合Angular Webpack Karma

Question

我正在尝试将单元测试添加到我的项目中。对于上下文，这是一个混合angular1 / angular4应用程序。其角4部分采用角度cli构建。我只对在角度4代码上运行karma / jasmine感兴趣，该代码位于路径src/app-ng/app中。所有spec文件都是typescript *.spec.ts文件，当karma启动时会被转换为javascript。

我的最新错误Uncaught Error: Mismatched anonymous define()已经死路一条。从阅读docs开始，有4个确定原因导致此错误：

  

  

1. 确保通过RequireJS API加载调用define（）的所有脚本。不要在HTML中手动编写脚本标记以加载脚本   在其中有define（）调用。

  

2. 如果手动编写HTML脚本标记代码，请确保它只包含命名模块，并且具有相同的匿名模块   名称作为该文件中的一个模块未加载。

  

3. 如果问题是使用加载程序插件或匿名模块，但RequireJS优化器不用于文件捆绑，请使用   RequireJS优化器。

  

4. 如果问题是var define lint方法，请使用/ * global define /（“global”之前没有空格）注释样式。

  

这些原因似乎都不适用于我，但我可能只是错过了它。我在index.html中有这个脚本标记，但我尝试删除它并没有帮助。 <script src="//use.typekit.net/atv1krw.js"></script> <script>try { Typekit.load({async: true}); } catch (e) { }</script>

我真的很感激你们可能有的任何见解，如果它有用，我很乐意分享更多的代码。

karma.conf.js

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine', 'requirejs'],
    files: [
      'src/app-ng/app/home/home.component.spec.ts',
      { pattern: 'node_modules/@angular/**/*.js', included: false, watched: true },
      { pattern: 'node_modules/@angular/**/*.js.map', included: false, watched: true },
      'test-main.js'
    ],
    exclude: [
    ],
    preprocessors: {
      '**/*.ts': ['typescript']
    },
    typescriptPreprocessor: {
      options: {
        sourceMap: false,
        target: 'ES5',
        module: 'amd',
        noImplicitAny: false,
        noResolve: true,
        removeComments: true,
        concatenateOutput: false
      },
      transformPath: function(path) {
        return path.replace(/\.ts$/, '.js');
      }
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    plugins: [
      'karma-requirejs'
    ],
    singleRun: false,
    concurrency: Infinity,
    mime: {
      'text/x-typescript': ['ts','tsx']
    }
  })
}

home.component.spec.ts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HomeComponent } from './home.component';

describe('HomeComponent', () => {
  let component: HomeComponent;
  let fixture: ComponentFixture<HomeComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ HomeComponent ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(HomeComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

来自karma start ./karma.conf.js的结果

编辑：我根据答案的建议添加了test-main.js：

var tests = [];
for (var file in window.__karma__.files) {
  if (window.__karma__.files.hasOwnProperty(file)) {
    if (/spec\.js$/.test(file)) {
      tests.push(file);
    }
  }
}

requirejs.config({
    // Karma serves files from '/base'
    baseUrl: '/base/src',

    paths: {
        'jquery': '../lib/jquery',
        'underscore': '../lib/underscore',
    },

    shim: {
        'underscore': {
            exports: '_'
        }
    },

    // ask Require.js to load these files (all our tests)
    deps: tests,

    // start test run, once Require.js is done
    callback: window.__karma__.start
});

现在出现错误：

Answer 1

告诉Karma不要包含您的测试文件：

files: [
      { pattern: 'src/app-ng/app/home/home.component.spec.ts', included: false },
      'test-main.js'
  ],

您已将其设置为通过TypeScript编译为AMD模块。默认情况下，files中包含的文件是通过script元素加载的。正如您所发现的，您无法加载具有script元素的AMD模块。使用included: false告诉Karma提供文件，但要避免生成script元素。而是通过RequireJS加载模块。作为Karma文档explains，test-main.js的工作是启动加载包含测试的模块。因此，它必须列在您的files中，并且必须加载script元素。