在Jest测试框架中访问角度服务构造函数

Question

我正在努力寻找以下问题的答案(我敢打赌，答案很可能相对简单(......

我正在使用 Jest 测试框架对 Ionic 3.4 应用程序进行单元测试，但无法弄清楚如何调用角度服务进行测试，其中构造函数初始化 Http 对象和 InAppBrowser Ionic Native 插件对象。

我的package.json文件包含以下配置：

...
"jest": {
"transform": {
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/__tests__/.*|\.(test|spec))\.(ts|tsx|js)$",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"json"
]
},
"devDependencies": {
"@types/jest": "^20.0.2",
"@types/node": "^7.0.31",
"jest": "^20.0.4",
"ts-jest": "^20.0.6",
"ts-node": "^3.0.6",
"tslint": "^5.4.3",
"tslint-eslint-rules": "^4.1.1",
"typescript": "2.3.3"
},
...

我的tsconfig.json文件位于 src/unit-tests 目录中(以便仅针对该目录及其内容，而不会干扰 Ionic 项目的根 tsconfig.json 文件(，如下所示：

{
"compilerOptions" : {
"module"                        : "commonjs",
"allowSyntheticDefaultImports"  : true,
"experimentalDecorators"        : true,
"noImplicitAny"                 : false,
"removeComments"                : false,
"locale"                        : "en-GB",
"alwaysStrict"                  : true,
"skipLibCheck"                  : true,
"pretty"                        : true
}
}

请求的服务 -提供者/设置/设置.ts- 如下：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import 'rxjs/add/operator/map';

@Injectable()
export class SettingsProvider {
constructor(public http     : Http,
private _INAPP  : InAppBrowser) 
{  }
// Methods follow here
}

然后在settings.test.ts文件中使用它，如下所示：

import 'reflect-metadata';
import { SettingsProvider } from '../providers/settings/settings';

let settings = null;
beforeEach(() => {
// The following works IF the SettingsProvider class 
// contains NO parameters in the constructor
settings = new SettingsProvider();
});

describe('Settings service', () => 
{
// Tests are defined within here
// using methods supplied by the 
// SettingsProvider class
});

如果我从设置提供程序类构造函数中取出参数，Jest 可以完全按预期运行测试(通过或失败(。

在设置提供程序类构造函数中设置参数的情况下，尝试运行测试脚本时会出现以下错误时开玩笑阻塞：

Test suite failed to run
/ionic-unit/node_modules/@ionic-native/in-app-browser/index.js:20
import { Injectable } from '@angular/core';
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
at Object.<anonymous> (src/providers/settings/settings:12:21)
at Object.<anonymous> (src/unit-tests/settings.test.ts:2:18)

如何配置测试脚本，以便 Jest 识别在设置提供程序构造函数中初始化的模块？

我对单元测试相对较新，并且一直在试图弄清楚如何完成此操作(但是，正如您所知道的，到目前为止没有太多的乐趣！

我感谢任何开发人员可能对此事的任何指导/建议。

谢谢！

Answer 1

我还没有使用过 Jest - 我通常使用 jasmine/karma，这是 @angular 团队的默认设置 - 但你不能使用 Testbed 来配置它吗？

有了业力/茉莉花，你可以做这样的事情：

beforeEach(async(() => {
TestBed.configureTestingModule({
providers: [
Http,
InAppBrowser
],
})
}));
beforeEach(async(() => TestUtils.beforeEachCompiler([]).then(compiled => {
fixture = compiled.fixture;
instance = compiled.instance;
fixture.autoDetectChanges(true);
})));