Karma无法加载导入的文件

Question

我已经挣扎了好几天了，因为我无法用业力进行任何真正的测试。我可以运行不需要导入的测试（如基本健全性测试），但一旦我必须从我的应用程序导入某些内容，我就会收到错误：

系统src。js:1085获取http://localhost:9876/base/dist/components/test.service404（未找到）fetchTextFromURL@system。src。js:1085（匿名函数）@system。src。js:1646ZoneAwarePromise@angular2 polyfills。js:589（匿名函数）@system。src。js:1645（匿名函数）@system。src。js:2667（匿名函数）@system。src。js:3239（匿名函数）@system。src。js:3506（匿名函数）@system。src。js:3888（匿名函数）@system。src。js:4347（匿名函数）@system。src。js:4599（匿名函数）@system。src。js:337ZoneDelegate。调用@angular2 polyfills。js:332Zone。运行@angular2 polyfills。js:227（匿名函数）@angular2 polyfills。js:576ZoneDelegate。invokeTask@angular2 polyfills。js:365Zone。runTask@angular2 polyfills。js:263drainMicroTaskQueue@angular2 polyfills。js:482ZoneTask。调用@angular2 polyfills。js:434棱角2多边形填充。js:469未处理的promise拒绝：因果报应。错误不是一个函数；区域：；任务：promise。然后Value:TypeError:karma。错误不是函数（…）consoleError@angular2 polyfills。js:469drainMicroTaskQueue@angular2 polyfills。js:498ZoneTask。调用@angular2 polyfills。js:434棱角2多边形填充。js:471错误：未捕获（在promise中）：类型错误：因果报应。错误不是函数（…）

我需要提到：示例测试：

import { provide } from 'angular2/core';
import {TestService} from './test.service';
import {
//   beforeEach,
  beforeEachProviders,
  describe,
  expect,
  it,
  inject,
//   injectAsync
} from 'angular2/testing';

 describe('TestService', () => {

  beforeEachProviders(() => [
    provide(TestService, {useClass: TestService})
  ]);
  it('should say hello with name', inject([TestService], (testService: TestService) => {
    expect(testService.name).toBe('Injected Service');
  }));

  it('should say hello with name', () => {
    expect(true).toBe(true);
  });

});

我的项目结构是基于多模块的，如：

因果报应。conf.js：

frameworks: ['jasmine'],

files: [
    // paths loaded by Karma
    { pattern: 'node_modules/angular2/bundles/angular2-polyfills.js', included: true, watched: true },
    { pattern: 'node_modules/systemjs/dist/system.src.js', included: true, watched: true },
    { pattern: 'node_modules/rxjs/bundles/rx.js', included: true, watched: true },
    { pattern: 'node_modules/angular2/bundles/angular2.js', included: true, watched: true },
    { pattern: 'node_modules/angular2/bundles/testing.dev.js', included: true, watched: true },
    { pattern: 'karma-test-shim.js', included: true, watched: true },
    { pattern: 'dist/components/matchers.js', included: true, watched: true },

    // paths loaded via module imports
    { pattern: 'dist/components/**/*.js', included: false, watched: true },

    // paths loaded via Angular's component compiler
    // (these paths need to be rewritten, see proxies section)
    { pattern: 'dist/*.html', included: false, watched: true },
    { pattern: 'dist/styles/*.css', included: false, watched: true },
    { pattern: 'dist/components/**/*.html', included: false, watched: true },
    { pattern: 'dist/components/**/*.css', included: false, watched: true },

    // paths to support debugging with source maps in dev tools
    { pattern: 'src/components/**/*.ts', included: false, watched: false },
    { pattern: 'dist/components/**/*.js.map', included: false, watched: false }
],

// proxied base paths
proxies: {
    // required for component assests fetched by Angular's compiler
    "/src/": "/base/src"
}, 

业力测试垫片。js:

...

System.config({
    packages: {
        'base/src': {
            defaultExtension: false,
            format: 'register',
            map: Object.keys(window.__karma__.files).
                filter(onlyAppFiles).
                reduce(function createPathRecords(pathsMapping, appPath) {
                    // creates local module name mapping to global path with karma's fingerprint in path, e.g.:
                    // './hero.service': '/base/src/app/hero.service.js?f4523daf879cfb7310ef6242682ccf10b2041b3e'
                    var moduleName = appPath.replace(/^\/base\/src\//, './').replace(/\.js$/, '');
                    pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath]
                    return pathsMapping;
                }, {})

        }
    }
});


function filePath2moduleName(filePath) {
    console.log('filePath2moduleName', filePath)
    return filePath.
        replace(/^\//, '').              // remove / prefix
        replace(/\.\w+$/, '');           // remove suffix
}


function onlyAppFiles(filePath) {
    console.log('filePath', filePath)
    return /^\/base\/src\/.*\.js$/.test(filePath)
}


function onlySpecFiles(path) {
    return /.spec\.js$/.test(path);
}

欢迎任何意见！

Answer 1

如果您将TS文件编译到dist文件夹中，我认为您有一个缺口。我会在你的业力测试中尝试以下内容。js文件：

System.config({
  packages: {
    'base/dist': {
        defaultExtension: false,
        format: 'cjs',
        map: Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords, {})
    }
  }
});

(...)

function createPathRecords(pathsMapping, appPath) {
  var pathParts = appPath.split('/');
  var moduleName = './' + pathParts.slice(Math.max(pathParts.length - 2, 1)).join('/');
  moduleName = moduleName.replace(/\.js$/, '');
  pathsMapping[moduleName] = appPath + '?' + window.__karma__.files[appPath];
  return pathsMapping;
}

createPathRecords函数中的下一行似乎很奇怪，因为您不应该拥有来自src的文件，而应该拥有来自dist的文件。

通过这段代码，我生成了以下SystemJS配置（mapblock）：

System.config({
  packages: {
    'base/dist': {
      defaultExtension: false,
      format: 'register',
      map: {
        './comps/my-list': '/base/dist/comps/my-list.js?e9(...)',
        './dist/my-app': '/base/dist/my-app.js?fe(...)',
        './pipes/my-pipe': '/base/dist/pipes/my-pipe.js?78(...)',
        './services/http-service': '/base/dist/services/http-service.js?c1(...)',
        './services/my-service': '/base/dist/services/my-service.js?b1(...)'
      }
    }
  }
});

在您的情况下/base/dist/组件/test.service不能由SystemJS解决，所以我猜测要么您的map块不正确，要么是包的条目。

请注意，map块的条目与packagesone的键相关。在您的情况下，我猜您将生成以下配置：

System.config({
  packages: {
    'base/src': {
      defaultExtension: false,
      format: 'register',
      map: {
        './components/test.service': '/base/dist/components/test.service.js',
        (...)
      }
    }
  }
});

为了调试您的问题，我将执行以下操作：

>

在createPathRecords函数中记录appPath：

reduce(function createPathRecords(pathsMapping, appPath) {
  console.log('appPath = '+appPath);
  (...)
}

记录整个map配置：

console.log(Object.keys(window.__karma__.files).filter(onlyAppFiles).reduce(createPathRecords, {}));

根据这些提示，您需要调整代码以实现以下配置：

{
  './components/test.service': '/base/dist/components/test.service.js',
  (...)
}