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（'Home Component test'，（）=＆gt; {| let component：any = HomeComponent; | | beforeEach（（）=＆gt; {@ ./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插件。我已将我的spec文件设置为karma.conf而不是karma-shim，并在那里添加了这些插件：

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

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

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

您不需要在webpack配置中指定条目选项以便使用karma进行测试，karma会监视测试入口点。

我认为这个问题有点陈旧，但也许这对其他人有用。

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

1 个答案: