如何使用TestBed和Jasmine在NativeScript中实现单元测试?

Question

>我正在设置一个NativeScript-Angular项目，并希望使用Jasmine-Karma实现单元测试，以便使用css选择器测试我的组件。如何为简单组件设置简单的单元测试(超出官方存储库中提供的示例测试)？

这适用于使用 NativeScript CLI 6.0 和 Android API 级别 28 的新项目。

我尝试使用常规的Angular TestBed，声称这篇博文支持它： https://www.nativescript.org/blog/announcing-the-nativescript-4.1-release

我还尝试在官方的 nativescript-angular 存储库上遵循他们的工作测试：https://github.com/NativeScript/nativescript-angular/tree/master/tests

无论哪种方式，当我尝试执行自己的实现时，我似乎都做错了什么，因为我收到以下错误：
Uncaught Error: Zone already loaded
TypeError: Cannot read property 'injector' of null
TypeError: Cannot read property 'getComponentFromError' of null
TypeError: Cannot read property 'currentPage' of undefined

有没有人设法让TestBed单元测试在NativeScript中使用Jasmine-Karma？

test-main.ts

import "nativescript-angular/zone-js/testing.jasmine";
import { nsTestBedInit } from "nativescript-angular/testing";
nsTestBedInit();

example.ts

import { ItemsComponent } from '~/app/item/items.component';
import { By } from '@angular/platform-browser';
import { nsTestBedBeforeEach, nsTestBedAfterEach, nsTestBedRender } from 'nativescript-angular/testing';
describe('item-detail-component', () => {
beforeEach(nsTestBedBeforeEach(
[ItemsComponent]
));
afterEach(nsTestBedAfterEach());
it(`should contain items`, () => {
return nsTestBedRender(ItemsComponent).then((fixture) => {
fixture.detectChanges();
const list = fixture.debugElement.query(By.css('.list-group'));
expect(list).toBeDefined();
});
})
});

我希望能够在没有任何错误的情况下运行测试。

我为每个测试实现提供了两个存储库。
重现步骤：1.
下载存储库
2.yarn install
3.tns test android

https://github.com/gsavchenko/nativescript-ns-testbed

更新

对于其他想知道如何使用端到端测试进一步测试其前端的人来说，Appium 似乎是首选 https://docs.nativescript.org/plugins/ui-tests

Answer 1

要使用 TestBed，您必须将karma.conf.js更改为：

// list of files / patterns to load in the browser
files: [
'src/tests/setup.ts',
'src/tests/**/*.spec.ts'
],

茉莉花的文件src/tests/setup.ts应如下所示：

import "nativescript-angular/zone-js/testing.jasmine";
import {nsTestBedInit} from "nativescript-angular/testing";
nsTestBedInit();

或者如果使用摩卡咖啡：

import "nativescript-angular/zone-js/testing.mocha";
import {nsTestBedInit} from "nativescript-angular/testing";
nsTestBedInit();

您将在此处找到一个示例：https://github.com/hypery2k/tns_testbed_sample

Answer 2

我和你一样面临同样的问题。我终于找到了一种在Nativescript-Angular作品中进行单元测试的方法。

为了解决我的问题，我添加了beforeAll(() => nsTestBedInit());和afterAll(() => { });也从TestBed更改为nsTestBed...我只是遵循这个想法 https://github.com/NativeScript/nativescript-angular/blob/master/tests/app/tests/detached-loader-tests.ts

还要将这一行添加到tsconfig.tns.json文件中："include": ["src/tests/*.spec.ts"],

我现在的问题是将所有测试拆分为多个文件。像测试文件中的应用组件 和主页在第二个测试文件中。当应用增长时，单元测试也会增长，我们需要组织我们的代码。

这是我的代码(文件名：src/tests/test.spec.ts)：

import "reflect-metadata";
import { AppComponent } from "../app/app.component";
import { nsTestBedBeforeEach, nsTestBedAfterEach, nsTestBedRender, nsTestBedInit }     from "nativescript-angular/testing";
import { HomeComponent } from "@src/app/home/home.component";
describe("AppComponent", () => {
beforeAll(() => nsTestBedInit());
afterAll(() => { });
beforeEach(nsTestBedBeforeEach([AppComponent, HomeComponent]));
afterEach(nsTestBedAfterEach());
it("should be: app works!", () => {
return nsTestBedRender(AppComponent).then((fixture) => {
fixture.detectChanges();
const app = fixture.componentInstance;
expect(app.title).toBe("app works!");
});
});
describe("HomeComponent", () => { 
it("should contain: Home works!", () => {
return nsTestBedRender(HomeComponent).then((fixture) => {
fixture.detectChanges();
const app = fixture.componentInstance;
expect(app.title).toBe("Home works!");
});
});
});
});

结果如下：

JS: NSUTR: downloading http://192.168.10.169:9876/context.json
JS: NSUTR: eval script /base/node_modules/jasmine-core/lib/jasmine-core/jasmine.js?be3ff9a5e2d6d748de5b900ac3c6d9603e2942a7
JS: NSUTR: eval script /base/node_modules/karma-jasmine/lib/boot.js?945a38bf4e45ad2770eb94868231905a04a0bd3e
JS: NSUTR: eval script /base/node_modules/karma-jasmine/lib/adapter.js?3098011cfe00faa2a869a8cffce13f3befc1a035
JS: NSUTR: eval script /base/src/tests/test.spec.bundle.js?6e0098824123f3edc2bb093fa874b3fdf268841e
JS: NSUTR: beginning test run
NativeScript / 28 (9; Android SDK built for x86): Executed 1 of 2 SUCCESS (0 secs / 0.545 secs)
NativeScript / 28 (9; Android SDK built for x86): Executed 2 of 2 SUCCESS (0.829 secs / 0.735 secs)
TOTAL: 2 SUCCESS
JS: NSUTR: completeAck
NativeScript / 28 (9; Android SDK built for x86) ERROR
DisconnectedClient disconnected from CONNECTED state (transport error)
NativeScript / 28 (9; Android SDK built for x86): Executed 2 of 2 SUCCESS (0.829 secs / 0.735 secs)

Answer 3

由于这些行，您的问题正在发生。

beforeAll(() => nsTestBedInit()); afterAll(() => { });

每个测试文件都尝试初始化测试台。确保在入口组件中初始化它。

请参考 karma.config 中指定的入口文件 test-main.ts.js