Angular-cli 没有运行 spec.ts 文件

Posted 2023-03-16

【中文标题】Angular-cli 没有运行 spec.ts 文件

【英文标题】：Angular-cli not running spec.ts files

【发布时间】：2017-04-06 12:53:57

【问题描述】：

我在 Webstorm 中创建了一个 Angular-CLI 项目，并试图确保所有测试都在运行。它启动 chrome 浏览器，但不报告任何内容。所以我在第一个 it 块中修改了 app.component.spec.ts，只添加了一个 console.log 语句，它不会记录到控制台。

在我手动关闭 Chrome 之前，它不会报告任何内容或给出任何错误（出于某种原因，即使我将其设置为仅在它不自行关闭时才运行）。它也没有显示 console.log 语句。

Karma.config

// Karma 配置文件，更多信息见链接 // https://karma-runner.github.io/0.13/config/configuration-file.html module.exports = 功能（配置） 配置.set( 基本路径：''， 框架：['jasmine'，'angular-cli']， 插件：[ 要求（'业力茉莉'）， 需要（'业力铬启动器'）， 要求（'业力重新映射-伊斯坦布尔'）， 需要（'angular-cli/plugins/karma'） ], 文件：[ 模式：'./src/*/*.spec.ts'，观看：假 ], 预处理器： './src/test.ts': ['angular-cli'] , 哑剧： '文本/x-typescript'：['ts'，'tsx'] , 重映射伊斯坦布尔记者： 报告： html: '覆盖率', lcovonly: './coverage/coverage.lcov' , 角Cli： 配置：'./angular-cli.json', 环境：'开发' , 记者：config.angularCli && config.angularCli.codeCoverage ? ['进步'，'业力重新映射-伊斯坦布尔'] ： ['进步']， 端口：9876， 颜色：真实， 日志级别：config.LOG_INFO， 自动监视：假， 浏览器：['Chrome']， 单跑：真 ); ;

关闭 Chrome 时出错：

22 11 2016 10:01:27.657:ERROR [karma]: TypeError: Cannot read property 'map' of undefined 在 ProgressReporter._render (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\reporters\progress.js:53:26) 在 ProgressReporter.writeCommonMsg (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\reporters\progress.js:9: 44) 在 ProgressReporter.BaseReporter.onBrowserError (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\reporters\b ase.js:63:10) 在服务器。 (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\events.js:13:22) 在 emitTwo (events.js:111:20) 在 Server.emit (events.js:191:7) 断开连接时（C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\browser.js:40:13） 在 Browser.onDisconnect (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\browser.js:157:7) 在套接字。 (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\karma\lib\events.js:13:22) 在 emitOne (events.js:96:13) 在 Socket.emit (events.js:188:7) 在 Socket.emit (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\socket.io\lib\socket.js:128:10) 在 Socket.onclose (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\socket.io\lib\socket.js:425:8) 在 Client.onclose (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\socket.io\lib\client.js:232:24) 在 emitTwo (events.js:111:20) 在 Socket.emit (events.js:191:7) 在 Socket.onClose (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\engine.io\lib\socket.js:304:10) 在 WebSocket.g (events.js:291:16) 在 emitNone (events.js:86:13) 在 WebSocket.emit (events.js:185:7) 在 WebSocket.Transport.onClose (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\engine.io\lib\transport.js:126:8) 在 WebSocket.g (events.js:291:16) 在 emitTwo (events.js:106:13) 在 WebSocket.emit (events.js:191:7) 在 WebSocket.cleanupWebsocketResources (C:\Users\Amy\WebstormProjects\SportsTactician\node_modules\engine.io\node_modules\ws\lib\ WebSocket.js:927:10) 在 emitOne (events.js:101:20) 在 Socket.emit (events.js:188:7) 在 emitErrorNT (net.js:1276:8) 在 _combinedTickCallback (内部/进程/next_tick.js:74:11) 在 process._tickCallback (internal/process/next_tick.js:98:9)

【参考方案1】：

所以似乎关闭自动监视是造成这种情况的原因。如果我重新打开它，它可以工作。当您通过 ng test 运行时，似乎将 singleRun 设置为 true 的效果为零。

如果你想在 autoWatch 为 false 和 singleRun 为 true 的情况下运行它，你需要使用 karma start。老派FTW！

更新：

根据Angular-CLI usage docs，要使用singleRun并且没有autoWatch：

运行单元测试

ng test

测试将在通过 Karma 执行构建后执行，它会自动监视文件的更改。您可以通过--watch=false 或--single-run 运行一次测试。

【参考方案2】：

听起来您想打开 autoWatch 并打开 singleRun。使用 --config 传递一个单独的配置文件进行测试。如果您只关心结果，这也允许您不显示 chrome 窗口，同时在您想要调试测试时仍保留原始配置。

进行以下配置文件更改并运行npm run test:headless 或ng test --config karma.conf.headless.js。您还可以在 ci 环境中使用它在 vm 中运行测试并记录测试结果。

添加新节点脚本以无头运行您的测试。

package.json:

...
  "scripts": 
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "test:headless": "ng test --config karma.conf.headless.js",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "e2e:headless": "ng e2e --config protractor.conf.headless.js"
  ,
...

karma.conf.headless.js

module.exports = function(config) 
  config.set(
    basePath: '',
    frameworks: ['jasmine', '@angular/cli'],
    plugins: [
      require('karma-jasmine'),
      require('karma-chrome-launcher'),
      require('karma-jasmine-html-reporter'),
      require('karma-coverage-istanbul-reporter'),
      require('@angular/cli/plugins/karma')
    ],
    client:
      clearContext: false // leave Jasmine Spec Runner output visible in browser
    ,
    coverageIstanbulReporter: 
      reports: [ 'html', 'lcovonly' ],
      fixWebpackSourcePaths: true
    ,
    angularCli: 
      environment: 'dev'
    ,
    reporters: config.angularCli && config.angularCli.codeCoverage
        ? ['progress', 'coverage-istanbul']
        : ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['ChromeHeadless'],
    singleRun: true,
    customLaunchers: 
        ChromeHeadless: 
            base: 'Chrome',
            flags: [
                // See https://chromium.googlesource.com/chromium/src/+/lkgr/headless/README.md
                '--headless',
                '--disable-gpu',
                // Without a remote debugging port, Google Chrome exits immediately.
                '--remote-debugging-port=9222',
            ]
        
    
  );
;

为了完整起见，这里也是量角器 conf protractor.conf.headless.js

const  SpecReporter  = require('jasmine-spec-reporter');

exports.config = 
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: 
    'browserName': 'chrome',
    chromeOptions: 
        args: [ "--headless", "--disable-gpu", "--window-size=1280x720" ]
    
  ,
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: 
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() 
  ,
  onPrepare() 
    require('ts-node').register(
      project: 'e2e/tsconfig.e2e.json'
    );
    jasmine.getEnv().addReporter(new SpecReporter( spec:  displayStacktrace: true  ));
  
;

【讨论】：

不，我不关心自动手表的任何一种方式。但似乎 ng test 做到了！我讨厌无头奔跑，因为你不能那样设置断点。

我不确定我是否理解这个问题。当我运行 npm run test 时，我有 2 个默认配置，它在自动监视开启的情况下启动 chrome 中的测试。我大部分时间都使用它，所以我可以设置断点和调试。另一个是当我运行在 CI 构建中使用的 npm run test:headless 以及我只想在控制台中查看测试结果时。您是否正在寻找类似在 chrome 中运行但不关注变化的东西？

我认为这可能只是特定版本的 Angular-CLI 的问题。您目前使用的是我在 11 月使用的同一个吗？根据下面的文档，该版本关闭了命令行开关，而不是 karma 配置文件。