Question

I am trying to set up a hybrid Angular app (AngularJS + Angular) that uses Webpack as its module loader and Karma+Jasmine as the testing framework. To run the tests, I am using karma-webpack; however, the bundle created by webpack is never loaded in the browser and therefore the tests are never executed (duh!). I've tried quite a few things as sanity checks, but I haven't found this problem anywhere else on the interwebs.

So, a little debugging information. First, my karma.conf.js file:

const webpackConfig = require('./webpack.test');

delete webpackConfig.entry;
delete webpackConfig.output;

module.exports = function(config) {
  config.set({
    basePath:           '',
    frameworks:         ['jasmine'],
    port:               8080,
    logLevel:           config.LOG_DEBUG,
    autoWatch:          false,
    browsers:           ['Chrome', 'Firefox'],
    singleRun:          true,

    files:              [
      // Some remote libraries that should be loaded.  These all load fine.
      './client/app/app.spec.ts'
    ],

    preprocessors:      {
      './client/app/app.spec.ts': ['webpack', 'sourcemap']
    },

    webpack:            webpackConfig,
    webpackMiddleware:  {
      stats:              {
        colors:             true
      }
    },

    browserNoActivityTimeout: 60000,

    client:             {
      captureConsole:     true
    },

    browserConsoleLogOptions: {
      level:                    'log',
      format:                   '%b %T:\n%m\n',
      terminal:                 true
    },

    reporters:          ['mocha'],
    mochaReporter:      {
      output:             'autowatch'
    }
  });
};

When running Karma, webpack executes successfully (karma-webpack prints webpack: Compiled successfully. and I can see the output from webpack); however, the temporary file where the bundle is supposed to be saved (i.e. /tmp/_karma_webpack_/) is never created.

I've set singleRun option to false to see what files are loaded, but the bundle isn't even requested. However, if I set the log level for Karma to DEBUG, I see the following (relevant) output:

01 02 2018 12:55:26.678:DEBUG [middleware:source-files]: Requesting /base/client/app/app.spec.ts?bb6177fad9c0cf145a4962a89c7d2efd0bd0235a /
01 02 2018 12:55:26.678:DEBUG [middleware:source-files]: Fetching /home/c1moore/omninox/omnistack/client/app/app.spec.ts
01 02 2018 12:55:26.678:DEBUG [web-server]: serving (cached): /home/c1moore/omninox/omnistack/node_modules/karma-jasmine/lib/adapter.js
01 02 2018 12:55:26.678:DEBUG [web-server]: serving (cached): /home/c1moore/omninox/omnistack/client/app/app.spec.ts

It looks like Karma is trying to serve the file that requires all the tests; however, I don't see that anywhere in the browser. That is, the file does not appear to be requested/loaded nor do I see any errors that would result from the browser trying to interpret TS as JS.

I didn't include the app.spec.ts file since it seems irrelevant being that it is never actually loaded. However, it's fairly standard. It imports all the stuff Angular requires, all vendor libraries, and requires all the tests (using require.context).

So, does anybody have any suggestions, pointers, or see something I may have missed? I've looked over the docs, the code, and various websites trying to find something simple I've missed, hopefully SO has some answers.

Answer 1

解决方案非常简单。我在其他一些SO帖子（Post 1和Post 2）上找到了答案。

基本上，Chrome和FF拒绝执行Karma发送的测试文件，因为errorlevel不会将打字稿文件的扩展名从karma-webpack更改为.ts。要解决此问题，只需在.js文件中为.ts文件指定mime类型，如下所示：

karma.conf.js

Bundle from karma-webpack Not Loaded

1 个答案: