如何使用 Angular 4 设置 Webpack + Karma？

Question

我在运行测试时遇到问题我收到此错误：

./src/app/home/home.component.spec.ts 中的警告模块解析失败： /home/master/Documents/ai/loan-market/loanapp/src/app/home/home.component.spec.ts 意外令牌 (5:17) 您可能需要适当的加载程序来处理 这种文件类型。 | | describe('家庭组件测试', () => { | 让 组件：任何= HomeComponent； | | beforeEach(() => { @ ./src .spec.ts @ ./karma-shim.js

这是我的webpack 设置：

const webpack = require('webpack');
const path = require('path');

module.exports = () => {
  return {
    entry: {
      test: './src/main.client.ts'
    },
    output: {
      path: './dist',
      filename: '[name].bundle.js'
    },
    resolve: {
      extensions: ['.js', '.ts', '.html']
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          loaders: [
            'awesome-typescript-loader',
            'angular2-template-loader'
          ]
        },
        {
          test: /\.html$/,
          loader: 'raw'
        }
      ]
    }
  };
};

这里是karma.conf.js设置：

// Karma configuration
// Generated on Fri Jun 23 2017 14:56:14 GMT+0200 (CEST)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: '',


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['jasmine'],


    // list of files / patterns to load in the browser
    files: [
      { pattern: './karma-shim.js', watched: false }
    ],


    // list of files to exclude
    exclude: [
    ],


    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: {
      './karma-shim.js': ['webpack', 'sourcemap']
    },
    webpack: require('./webpack/webpack-karma.config'),
    webpackMiddleware: {
      // webpack-dev-middleware configuration
      // i. e.
      stats: 'errors-only'
    },
    webpackServer: {
      noInfo: true // please don't spam the console when running in karma!
    },

    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: false,

    // Concurrency level
    // how many browser should be started simultaneous
    concurrency: Infinity
  })
}

还有karma-shim.js：

Error.stackTraceLimit = Infinity;

require('core-js/client/shim');
require('reflect-metadata');

require('ts-helpers');

require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');


/*
 Ok, this is kinda crazy. We can use the the context method on
 require that webpack created in order to tell webpack
 what files we actually want to require or import.
 Below, context will be a function/object with file names as keys.
 using that regex we are saying look in client/app and find
 any file that ends with '.spec.ts' and get its path. By passing in true
 we say do this recursively
 */
var appContext = require.context('./src', true, /\.spec\.ts/);

// get all the files, for each file, call the context function
// that will require the file and load it up here. Context will
// loop and require those spec files here
appContext.keys().forEach(appContext);

// Select BrowserDomAdapter.
// see https://github.com/AngularClass/angular2-webpack-starter/issues/124
// Somewhere in the test setup
var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

任何人都知道如何使它正常工作？

Answer 1

我做过类似的事情。为了解决这个问题，我使用了karma-webpack 插件。 我在 karma.conf 而不是 karma-shim 中设置了我的规范文件，并在那里添加了这些插件：

files: [
  './karma-shim.js',
  'src/**/*.spec.ts'
],

plugins: [
  "karma-webpack",
  'karma-chrome-launcher',
  'karma-jasmine'
],

你当然应该用 npm 安装它们。

你不需要在 webpack 配置中指定 entry 选项来使用 karma 进行测试，karma 会监视测试入口点。

我看到这个问题有点老了，但也许这对其他人有用。