Angular 4 CLI无法找到名称为'jasmine'的内容。

Question

Angular 4 CLI无法找到名称为'jasmine'的内容。

karma-jasmineangular-clitypescript-typings

20

我正在使用Angular 4 CLI (v.1.0.0)，为了处理测试，我创建了一些使用Jasmine创建间谍的模拟。在IDE中一切看起来都很好，但是在终端中我得到了一个错误：“找不到名称'jasmine'”。

起初，我认为问题在于未将jasmine添加到typings中，但我可以看到package.json包含了jasmine类型定义的导入，所以我不确定缺少什么。

mocks.ts

export class MockAuthService {
  public login: Function = jasmine.createSpy('login');
}

export class MockHttpService {
  public delete: Function = jasmine.createSpy('delete');
  public get: Function = jasmine.createSpy('get');
  public post: Function = jasmine.createSpy('post');
  public put: Function = jasmine.createSpy('put');
}

在终端中运行ng serve会返回以下错误信息。

ERROR in C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (2,23): 找不到名称为'jasmine'的变量。 C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (6,24): 找不到名称为'jasmine'的变量。 C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (7,21): 找不到名称为'jasmine'的变量。 C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (8,22): 找不到名称为'jasmine'的变量。 C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts (9,21): 找不到名称为'jasmine'的变量。 webpack: 编译失败。

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

tsconfig.spec.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "module": "commonjs",
    "target": "es5",
    "baseUrl": "",
    "types": [
      "jasmine",
      "node"
    ]
  },
  "files": [
    "test.ts"
  ],
  "include": [
    "**/*.spec.ts",
    "**/*.d.ts"
  ]
}

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

package.json

{
  "name": "prod",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.2",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/flex-layout": "^2.0.0-beta.8",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^2.0.0-beta.3",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.0.0",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
}

- efarley

你使用的CLI版本是什么？此外，如果你有多个tsconfig文件，请发布所有文件。如果你正在使用Angular-CLI v1.0.0，你应该在文件src/tsconfig.spec.json中看到"types": [ "jasmine", ...]。 - Ahmed Musallam

我正在运行 angular-cli v1.0.0。我在 tsconfig.json 中没有看到 types 键，但我看到了 typeRoots。我已经更新了问题以包括配置文件。 - efarley

你没有 src/tsconfig.spec.json 吗？ - Ahmed Musallam

啊，是的，现在将它添加到问题中。 - efarley

2个回答

4

我不确定你是否应该那样创建茉莉间谍，但无论如何：

问题出在您的文件名上。

请注意：tsconfig.spec.json 中有："include": ["**/*.spec.ts","**/*.d.ts"]

而您的文件名是 mocks.ts。

要么将文件名更改为 mocks.spec.ts,

要么添加 "**/*.mock.ts" 并将其重命名为类似于 service.mock.ts 的东西。

希望这可以帮助到你。

- Ahmed Musallam

1

mocks.spec.ts 已经起作用了。很好的发现。不过我很好奇你为什么会质疑这种创建间谍的方式。这个想法是，我可以创建模拟服务并将其传递给单元测试，以便在每个方法中都已经进行了间谍操作，因此不需要在测试规范中声明间谍。如果我需要修改返回值，我可以在需要的测试中轻松地进行修改。我觉得这样做可以更快地编写测试。如果你找到了其他设置模拟服务的方法，我会很感兴趣阅读。 - efarley

我提出疑问是因为我没有看到过这种做法，如果它是一个好的实践并且适用于你的用例，那就没问题。很高兴能帮到你 :) - Ahmed Musallam

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- superluminary · Accepted Answer

你遇到这个错误是因为TypeScript在尝试将mock包含在app构建中，而应用程序（正确地）不知道Jasmine。

在tsconfig.app.json的exclude数组中添加该mock以将其从应用程序编译中排除：

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "**/*.mock.ts"
  ]
}