标签: karma-webpack

我正在使用Karma-Webpack来运行我的Angular 2规范.

https://github.com/webpack/karma-webpack

当我在Chrome中使用karma执行测试时,我的规范的源文件在调试器中看起来是可读的.但是,受测试的系统文件(我的应用程序源)是不可读的.

我正在使用karma-sourcemap-loader并按照指示将devtool设置为'inline-source-map'.什么可能导致这个问题？

此构建模仿AngularClass angular2-webpack-starter之后的模型. https://github.com/AngularClass/angular2-webpack-starter

调试器中的Spec文件:

调试器中的SUT文件:

webpack.test.js

const helpers = require('./helpers');

/**
 * Webpack Plugins
 */
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');

/**
 * Webpack Constants
 */
const ENV = process.env.ENV = process.env.NODE_ENV = 'test';

/**
 * Webpack configuration
 *
 * See: http://webpack.github.io/docs/configuration.html#cli
 */
module.exports = {

  /**
   * Source map for Karma from the help of karma-sourcemap-loader &  karma-webpack
   *
   * Do not change, leave as is or it wont work.
   * See: …

在最近发布的webpack 1.14.0/karma 1.4.0/karma-webpack 2.2.0之后,当karma开始其webpack构建时,我现在看到了很多这些消息.

webpack: wait until bundle finished:

有时我看到多达6-8个,他们似乎正在使构建更长.例如,这个:

Hash: 255562a2a96fffe34fae
Version: webpack 1.14.0
Time: 408ms
webpack: bundle is now VALID.
webpack: bundle is now INVALID.
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
webpack: wait until bundle finished:
ts-loader: Using typescript@2.1.5 and C:\git\project\tsconfig.json

到目前为止,它还没有阻止我的构建,但至少它似乎现在已经锁定,即使是暂时的.其他人看到这个？如果它是我的结果,我想要清理它,但正如我所说,我的配置文件没有改变,但现在已经出现了最近发布的karma/webpack系列产品过去3周.

我的问题是:

1. 这条消息是什么意思？
2. 如何解决创建它们的问题？

我正在使用angular-cli,我想使用两个karma.conf.js文件进行测试.

1. 对于CI:我正在使用Headless Chrome

   customLaunchers:{

     ChromeHeadless: {
       base: 'Chrome',
       flags: [
         '--headless',
         '--disable-gpu',
         // Without a remote debugging port, Google Chrome exits immediately.
         '--remote-debugging-port=9222',
       ],
     }
   }
   

   Run Code Online (Sandbox Code Playgroud)

2. 对于Dev:我正在使用Chrome.

有什么方法可以根据参数值切换两个karma.conf.js.

我最近从 Angular9 更新到 Angular 12。更新后我的测试开始“失败”。我对此进行了引用，因为测试本身似乎很好，但是每次运行后都会出现一个“错误”条目，这不是很有帮助

Uncaught ReferenceError: process is not defined
ReferenceError: process is not defined
    at Object.71732 (http://localhost:9876/_karma_webpack_/webpack:/node_modules/util/util.js:109:1)
    at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
    at Object.89122 (http://localhost:9876/_karma_webpack_/webpack:/node_modules/assert/build/internal/assert/assertion_error.js:35:16)
    at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
    at Object.80469 (http://localhost:9876/_karma_webpack_/webpack:/node_modules/assert/build/assert.js:36:22)
    at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
    at Module.82736 (http://localhost:9876/_karma_webpack_/main.js:2879:64)
    at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack:/webpack/bootstrap:19:1)
    at webpackContext (http://localhost:9876/_karma_webpack_/webpack:/home/kewur/workplace/Project/project-app/src|sync|/\.spec\.ts$:111:1)
    at Array.map (<anonymous>)

我有点困惑，因为错误非常模糊。我是否缺少此升级所需的一些额外依赖项？我没有在代码中的任何地方引用 process，所以它所指的内容必须在 webpack 或 karma 中？

我尝试使用 angular.io 网站上描述的 Angular TestBed 来测试一个简单的组件，但我收到如下错误：TypeError: undefined is not an object (evaluating 'ProxyZoneSpec.assertPresent')和 404，因为它无法加载外部组件模板。

如果我创建一个示例单元测试，而不使用/设置 TestBed，它可以正常工作，因此至少为项目正确设置了 Karma 和 Jasmine。该问题与 Angular TestBed 有关。除了 angular.io 之外还有其他文档吗？按照这些文档，它似乎不起作用。

业力配置文件

var webpackConfig = require('./webpack/webpack.dev.js');

module.exports = function (config) {
  config.set({
      basePath: '',
      frameworks: ['jasmine'],
      files: [            
        './app/polyfills.ts',
        './app/**/*.spec.ts',
      ],
      exclude: [    ],
      preprocessors: {
        './app/polyfills.ts': ['webpack', 'sourcemap'],
        './app/**/*.spec.ts': ['webpack', 'sourcemap']
      },
      webpack: {
        devtool: 'inline-source-map',
        module: webpackConfig.module,
        resolve: webpackConfig.resolve
      },
      mime: {
        'text/x-typescript': ['ts', 'tsx']
      },

reporters: ['progress', 'junit', 'tfs'],
port: 9876,
colors: …

我有一些测试文件,我想对我的应用程序运行测试.

我试图使用karma,karma-webpack,karma-babel-preprocessor,karma-chrome-launcher,和jasmine在我的测试.我的应用程序取决于很多东西,包括backbone,marionette等等.我的应用程序是使用构建的webpack,我试图将webpack我的文件捆绑在一起进行测试.(我最初想看看我是否可以跳过这一步,即只是import一个待测试的文件,但似乎这是不可能的.)

我的测试脚本看起来像

package.json(脚本部分)

"test": "./node_modules/karma/bin/karma start",

其余的文件:

karma.conf.js

var webpackConfig = require('./config/webpack/webpack.test.conf.js');

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['jasmine'],
    files: [
      { pattern: 'test/**/*.spec.js', watched: true },
      { pattern: 'test/*.spec.js', watched: true }
    ],
    exclude: [
    ],
    preprocessors: {
        'test/**/*.spec.js': ['webpack'],
        'test/*.spec.js': ['webpack']
    },
    webpack: webpackConfig,
    webpackMiddleware: {
        stats: 'errors-only'
    },
    reporters: ['progress'],
    port: 9876,
    colors: …

我正在尝试使用 npm 运行角度测试

ng test

但问题是 chrome 在测试完成后启动而不停止，所以我使用了：

ng test --watch=false

但这会导致错误“Chrome 69.0.3497 (Linux 0.0.0) ERROR”，导致 chrome 超时

当通过angular-cli（ng test -cc）运行具有代码覆盖率的测试时，因果报应抛出以下错误。罪魁祸首似乎是伊斯坦布尔代码覆盖率模块，因为在没有-cc的情况下运行测试不会导致任何错误。

错误（我用***替换了本地路径）：

at Object.exports.default (***\node_modules\istanbul-instrumenter-loader\dist\index.js:25:16),Module build failed: SyntaxError: 'import' and 'export' may appear only with 'sourceType: "module"' (1:0)
    at Parser.pp$5.raise (***\node_modules\babylon\lib\index.js:4454:13)
    at Parser.pp$1.parseStatement (***\node_modules\babylon\lib\index.js:1881:16)
    at Parser.parseStatement (***\node_modules\babylon\lib\index.js:5910:22)
    at Parser.pp$1.parseBlockBody (***\node_modules\babylon\lib\index.js:2268:21)
    at Parser.pp$1.parseTopLevel (***\node_modules\babylon\lib\index.js:1778:8)
    at Parser.parse (***\node_modules\babylon\lib\index.js:1673:17)
    at Object.parse (***\node_modules\babylon\lib\index.js:7305:37)
    at Instrumenter.instrumentSync (***\node_modules\istanbul-lib-instrument\dist\instrumenter.js:121:31)
    at Instrumenter.instrument (***\node_modules\istanbul-lib-instrument\dist\instrumenter.js:176:32)
    at Object.exports.default (***\node_modules\istanbul-instrumenter-loader\dist\index.js:25:16)
    at Compiler.compiler.plugin (***\node_modules\@angular\cli\plugins\karma-webpack-throw-error.js:10:23)
    at Compiler.applyPlugins (***\node_modules\tapable\lib\Tapable.js:61:14)
    at Watching._done (***\node_modules\webpack\lib\Compiler.js:92:17)
    at onCompiled (***\node_modules\webpack\lib\Compiler.js:51:17)
    at ***\node_modules\webpack\lib\Compiler.js:494:13
    at next (***\node_modules\tapable\lib\Tapable.js:202:11)
    at Compiler.<anonymous> (***\node_modules\webpack\lib\CachePlugin.js:62:5)
    at Compiler.applyPluginsAsyncSeries (***\node_modules\tapable\lib\Tapable.js:206:13)
    at ***\node_modules\webpack\lib\Compiler.js:491:10
    at Compilation.applyPluginsAsyncSeries (***\node_modules\tapable\lib\Tapable.js:195:46) …

我将 Karma 与 karma-webpack 插件一起使用，用于与 babel 捆绑和转译。当测试出现错误时，我会收到一条很好的消息，其中包含包的行号，如下所示：

服务：文档服务

? 获得正确数量的顾问客户

TypeError: undefined is not an object (evaluating 'GLOBALS.TESTING_ENV') (line 37)

这很好，但我找不到在哪里访问包文件并检查所描述的行。

我尝试output在 webpack 配置中使用该选项，但这似乎没有任何作用。

这是我的 karma.conf：

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

    basePath: __dirname + '/',

    frameworks: ['phantomjs-shim', 'jasmine'],

    files: [
      './test/**/*spec.js'
    ],
    
    preprocessors: {
      'src/**/*.js': ['webpack'],
      'test/**/*.js': ['webpack']
    },

    webpack: {
      mode: 'development',
      output: {
          path: path.resolve(__dirname, './build/'),
          filename: 'app-[name].js',
          chunkFilename: 'app-vendors.[chunkhash].js'
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: ['babel-loader']
          }
        ]
      }
    }, …

我正在使用 Typescript 创建一些带有 Lit 元素的 Web 组件。使用 karma 捆绑和单元测试的 Webpack。

我注意到覆盖率报告已经全部出来了：

• 在装饰器上显示未覆盖的分支和语句
• 错误地报告了装饰器后面的行的覆盖率

我试过/* istanbul ignore next */在装饰器之前添加，但是 tsc 删除了它。

关于如何更新配置以防止装饰器被包含在覆盖率报告中的任何想法？

来源：

import {customElement, html, LitElement, property} from "lit-element";
import Style from "./style.less";

@customElement("webcom-voorbeeld")
export class WebcomVoorbeeld extends LitElement {

    @property({type: String, attribute: "attribute"})
    attribute = "default";

    @property({type: Number})
    property = 0;

    static get styles() {
        return [Style];
    }

    constructor() {
        super();
    }

    render() {
        return html
            `<div class="webcom webcom-voorbeeld">
                <p class="heading font-bold webcom-clr-blue-02">New Voor-Beeld component</p>
                <div class="slot …