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
    }
}

请求的服务 - providers / settings / settings.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
});

如果我从SettingsProvider类构造函数中取出参数，Jest可以完全按预期运行测试（通过或失败）。

使用SettingsProvider类构造函数中的参数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识别在SettingsProvider构造函数中初始化的模块？

我对单元测试相对较新，并且一直试图弄清楚如何实现这一目标（但是，正如你所知，到目前为止没有太多的快乐！）

我感谢任何有关此事的开发人员的任何指导/建议。

谢谢！

Answer 1

我还没有使用过Jest - 我通常使用茉莉/业力，这是@angular团队的默认值 - 但你不能使用Testbed to configure it吗？

使用karma / jasmine，你可以这样做：

beforeEach(async(() => {
TestBed.configureTestingModule({
    providers: [
        Http,
        InAppBrowser
    ],
})
}));

beforeEach(async(() => TestUtils.beforeEachCompiler([]).then(compiled => {
    fixture = compiled.fixture;
    instance = compiled.instance;
    fixture.autoDetectChanges(true);

})));

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

1 个答案: