Question

我已经苦苦挣扎了几天，事实上我无法对Karma进行任何真正的测试。我可以运行不需要导入的测试（比如基本的健全性测试），但是一旦我必须从我的应用程序导入一些东西，我就会收到错误：

system.src.js：1085 GET http://localhost:9876/base/dist/components/test.service 404（未找到）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.invoke @ angular2 -polyfills.js：332Zone.run @ angular2-polyfills.js：227（匿名函数）@ angular2-polyfills.js：576ZoneDelegate.invokeTask @ angular2-polyfills.js：365Zone.runTask @ angular2-polyfills.js：263drainMicroTaskQueue @ angular2 -polyfills.js：482ZoneTask.invoke @ angular2-polyfills.js：434 angular2-polyfills.js：469未处理的承诺拒绝：业力。错误不是函数;区域：;任务：Promise.then;值：TypeError： karma .error不是函数（...）consoleError @ angular2-polyfills.js：469drainMicroTaskQueue @ angular2-polyfills.js：498ZoneTask.invoke @ angular2-polyfills.js：434 angular2-polyfills.js：471错误：未捕获（承诺）：TypeError：业力 .error不是函数（...）

我需要提一下：示例测试：

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);
  });

});

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

Karma.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"
},

果报测试shim.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文件夹中，我认为您有差距。我会在您的karma-test-shim.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配置（map块）：

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(...)'
      }
    }
  }
});

在您的情况下，SystemJS无法解析/base/dist/components/test.service，因此我猜您的map阻止不正确或packages阻止了。

请注意，map块的条目相对于packages块的键。在您的情况下，我猜您生成以下配置：

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

因此，要调试您的问题，我会执行以下操作：

在appPath功能中记录createPathRecords：

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',
  (...)
}

Karma无法加载导入的文件

1 个答案: