angular - 如何使用 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 :区域已加载
TypeError:无法读取 null 的属性“injector”
TypeError:无法读取 null 的属性“getComponentFromError”
TypeError: 无法读取未定义的属性“currentPage”

有没有人设法让 TestBed 单元测试在带有 Jasmine-Karma 的 NativeScript 中工作？

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 安装
3. tns测试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 对于 jasmine 应该如下所示:

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