我正在使用 Angular 4 CLI (v.1.0.0),为了处理测试,我创建了一些使用 jasmine 来创建间谍的模拟。在 IDE 中,一切看起来都不错,但是在终端中,我收到错误消息“找不到名称‘jasmine’”。
起初我认为问题是 jasmine 没有添加到类型中,但我可以看到 package.json 包含 jasmine 类型 def 的导入,所以我不确定缺少什么。
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');
}
运行 ngserve 将在终端中返回以下错误消息。
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): 找不到名字“茉莉花”。 C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts(7,21): 找不到名字“茉莉花”。 C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts(8,22): 找不到名字“茉莉花”。 C:/Users/efarley/Desktop/repos/prod/src/app/mocks/mocks.ts(9,21): 找不到名字“茉莉花”。 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"
}
}
您收到错误是因为 TypeScript 试图将模拟包含在
app
构建中,并且应用程序(正确地)不了解 Jasmine。
将模拟添加到
exclude
中的 tsconfig.app.json
数组中,从应用程序编译中排除该模拟:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "es2015",
"baseUrl": "",
"types": []
},
"exclude": [
"test.ts",
"**/*.spec.ts",
"**/*.mock.ts"
]
}
我不确定你是否应该以这种方式创建茉莉花间谍,但无论如何:
问题在于您的文件名
通知:
tsconfig.spec.json
有:"include": ["**/*.spec.ts","**/*.d.ts"]
您的文件名为
mocks.ts
。
将文件名更改为
mocks.spec.ts
或添加
"**/*.mock.ts"
并重命名为 service.mock.ts
希望这有帮助。
由于一些奇怪的原因,上述解决方案都不适合我,所以我使用了:
// @ts-ignore
在我使用
jasmine
的行之前。
我知道这不是理想的解决方案,但对我有用。