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

Question

我正在建立一个 NativeScript-Angular 项目，并且想使用 Jasmine-Karma 实施单元测试以测试我的组件使用css 选择器。我如何为一个简单的组件设置一个简单的单元测试（除了官方存储库中提供的示例测试之外）？

这是一个使用 NativeScript CLI 6.0 Android API 级别 28 的新项目。

我已经尝试使用常规 Angular TestBed，该博客声称受支持 post： 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

我遇到了和你一样的问题。我终于找到了一种在 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"],

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

这里是我的代码（文件名：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 2

你的问题是因为这些行而发生的。

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

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

请参考条目文件test-main.ts specified in karma.config.js

Answer 3

要使用 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

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

How to implement unit tests in NativeScript using TestBed and Jasmine?

testbed

karma-jasmine

nativescript

angular