Angular 2 业力设置问题——业力启动但不运行测试

Posted 2023-03-07

【中文标题】Angular 2 业力设置问题——业力启动但不运行测试

【英文标题】：Angular 2 karma setup issue -- Karma starts but doesn't run tests

【发布时间】：2017-05-30 03:26:37

【问题描述】：

简而言之，

我正在创建一个从 Angular 的 Plunker 代码开始的项目 2 “路由”示例（通过the Angular 2 Advanced Tutorial for Routing 链接访问）。该来源没有业力或茉莉花 配置已入炉。

我一直在尝试将其添加到现有的 项目。我当前的设置运行 karma 但没有看到任何测试，无论是 .js 还是 .ts。

14 01 2017 19:16:44.080:WARN [karma]: No captured browser, open http://localhost:9876/
14 01 2017 19:16:44.112:INFO [karma]: Karma v1.4.0 server started at http://0.0.0.0:9876/
14 01 2017 19:16:44.112:INFO [launcher]: Launching browser Chrome with unlimited concurrency
14 01 2017 19:16:44.268:INFO [launcher]: Starting browser Chrome
14 01 2017 19:16:46.895:INFO [Chrome 55.0.2883 (Windows 10 0.0.0)]: Connected on socket [SNIP]

首先我从the Angular 2 Advanced Tutorial for Testing 链接开始。也就是说我应该创建 /app/1st.spec.ts：

describe('lst tests', () => 
    it('true is true', () => expect(false).toBe(true));
);

然后我运行 npm test，但发现我没有 Karma 功能。从那时起，我安装了各种基于advice from a programmer's blog 的软件包。我的装置变成了：

npm install karma –save-dev
npm install karma-jasmine jasmine-core –save-dev
npm install karma-chrome-launcher –save-dev 
npm install karma-cli
npm install angular-mocks
npm install requirejs karma-requirejs

我运行“karma init”并尽我所能回答问题。我当前的 karma.conf.js 是（浓缩的）：

module.exports = function(config) 
  config.set(
    basePath: '',
    frameworks: ['jasmine', 'requirejs'],
    files: [
      pattern: 'app/*.js', included: false,
      pattern: 'app/*.spec.js', included: false,
      pattern: 'app/**/*.js', included: false
    ],
    exclude: [ ],
    preprocessors:  ,
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    singleRun: false,
    concurrency: Infinity
  )

我的 package.json 是：

  "name": "MyProgram",
  "version": "0.1.0",
  "license": "MIT",
  "description": "MyProgram description",
    "scripts": 
      "start": "gulp copy-jit && concurrently \"npm run tsc:w\" \"npm run lite\" ",
      "lite": "lite-server",
      "tsc": "tsc",
      "tsc:w": "tsc -w",
      "aot": "ngc -p tsconfig-aot.json",
      "rollup": "rollup -c rollup-config.js",
      "start-aot": "npm run aot && npm run rollup && gulp copy-aot && npm run lite",
      "test": "karma start karma.conf.js"
  ,
  "dependencies": 
    "@angular/common": "~2.2.4",
    "@angular/compiler": "~2.2.4",
    "@angular/compiler-cli": "~2.2.4",
    "@angular/core": "~2.2.4",
    "@angular/forms": "~2.2.4",
    "@angular/http": "~2.2.4",
    "@angular/platform-browser": "~2.2.4",
    "@angular/platform-browser-dynamic": "~2.2.4",
    "@angular/platform-server": "^2.2.4",
    "@angular/router": "~3.2.4",
    "@angular/upgrade": "~2.2.4",
    "angular-in-memory-web-api": "~0.1.5",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25"
  ,
  "devDependencies": 
    "@types/core-js": "^0.9.34",
    "@types/jasmine": "^2.5.35",
    "@types/node": "^6.0.45",
    "@types/selenium-webdriver": "^2.53.32",
    "concurrently": "^3.0.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-gzip": "^1.4.0",
    "gulp-load-plugins": "^1.3.0",
    "gulp-rename": "^1.2.2",
    "gulp-task-listing": "^1.0.1",
    "gulp-util": "^3.0.7",
    "jasmine-core": "^2.5.2",
    "karma": "^1.4.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.1.0",
    "karma-requirejs": "^1.1.0",
    "lite-server": "^2.2.2",
    "rollup": "^0.36.1",
    "rollup-plugin-commonjs": "^5.0.4",
    "rollup-plugin-node-resolve": "^2.0.0",
    "rollup-plugin-uglify": "^1.0.1",
    "typescript": "^2.0.3"
  

我希望通过您的回复解决的问题是：

适合 Karma 和 Jasmine 的 Angular 2 项目配置 测试。 能够创建 Typescript 源代码测试并检测它们并在 Karma 中运行。

谢谢，

杰罗姆。

【问题讨论】：

这是good article。

你的链接很好。它探索业力及其各种配置。似乎——从文章、其他海报和我的经验来看——我真的必须回到快速入门。在 Angular 2 的这种成熟状态下，还没有一种定义明确的方式来诊断安装。我应该重新创建项目——或者删除 node_modules 并重新安装。在我的 PC 上加载 Quickstart 后，我​​看到了很多我无法通过修补来解决的小问题。

我使用 Angular 快速入门来获得环境的“新”版本。我的库大致从 2.2.4 版翻译到 2.4 版。我将代码复制到新环境中。看哪！东西不行！似乎开发人员更改了 Resolve 接口的签名。幸运的是，路由教程也更新了，所以我很容易修复。但我认为，对于“大于 Beta”的版本，接口将是不可变的。 /咆哮

【参考方案1】：

我也试图通过这个过程。我知道，如果您使用 Angular CLI 执行

ng new

，它将为您创建一个项目，并正确设置所有 Karma 内容。

ng test

与

npm test

类似，但速度似乎也快得多。 package.json 的“scripts”部分控制“test”命令行选项。 我尝试将其复制到英雄之旅第 6 部分中，并成功完成了 1st.spec.ts 并让 Karma 启动并将 true = true 转换为 true = false。 但当时它说您可以在 Chrome 中加载 1st.spec.ts，但对我也不起作用（第 5 点 here）。 我记录了跨here 复制文件的方法。 您还感到烦恼的是，Karma 使用了一个使用 LTS 发布周期落后于时代的 Node 版本。所以设置nvm是明智的。见here