如何在NativeScript中使用TestBed测试组件？附问题解决示例

我正在用NativeScript 6+搭配Angular 8+开发应用，已经能成功编写普通组件的单元测试，示例代码如下：

import { ItemsComponent } from "~/app/item/items.component";
import { ItemService } from "~/app/item/item.service";
describe('Items Component Standard Test', () => {
  let component: ItemsComponent;
  beforeEach(() => {
    component = new ItemsComponent(new ItemService());
  });
  it('should be defined', () => {
    expect(component).toBeTruthy();
  });
});

但当我尝试用nsTestBed相关方法测试时，出现了报错。我的测试代码如下：

import { ItemsComponent } from "~/app/item/items.component";
import { ItemService } from "~/app/item/item.service";
import { nsTestBedBeforeEach, nsTestBedAfterEach, nsTestBedRender } from "nativescript-angular/testing";
describe('Renderer E2E', () => {
  beforeEach(nsTestBedBeforeEach([ItemsComponent], [ItemService]));
  afterEach(nsTestBedAfterEach(false));
  it('should be defined', () => {
    nsTestBedRender(ItemsComponent).then((fixture) => {
      expect(fixture.componentInstance).toBeTruthy();
    });
  });
});

报错信息：

CONSOLE WARN file:///node_modules/@nativescript/angular/testing/src/util.js:171:0: nsTestBedRender called without nsTestBedBeforeEach/nsTestBedAfter each. You are responsible for calling 'fixture.destroy()' when your test is done in order to clean up the components that are created.
CONSOLE ERROR file:///app/vendor.js:85281:30: Unhandled Promise rejection: 'expect' was used when there was no current spec, this could be because an asynchronous test timed out ; Zone: ProxyZone ; Task: Promise.then ; Value: Error: 'expect' was used when there was no current spec, this could be because an asynchronous test timed out...

请问是否可以在NativeScript中使用TestBed测试组件？如果可以，请提供正确的示例。

当然可以在NativeScript Angular中使用TestBed（包括NativeScript封装的nsTestBed工具类）来测试组件，你遇到的报错核心原因是异步测试的生命周期处理不当：nsTestBedRender返回的Promise在测试用例（it块）执行完成后才resolve，此时Jasmine的测试spec已经结束，所以expect调用会触发报错。

解决方法1：用async/await处理nsTestBed的异步逻辑 #

把it块改成异步函数，用await等待nsTestBedRender完成，确保断言在测试spec的生命周期内执行：

import { ItemsComponent } from "~/app/item/items.component";
import { ItemService } from "~/app/item/item.service";
import { nsTestBedBeforeEach, nsTestBedAfterEach, nsTestBedRender } from "nativescript-angular/testing";

describe('Renderer E2E', () => {
  // 正确注册组件和依赖服务
  beforeEach(nsTestBedBeforeEach([ItemsComponent], [ItemService]));
  afterEach(nsTestBedAfterEach(false));

  // 使用async/await处理异步渲染
  it('should be defined', async () => {
    const fixture = await nsTestBedRender(ItemsComponent);
    expect(fixture.componentInstance).toBeTruthy();
    // 手动销毁fixture确保资源清理
    fixture.destroy();
  });
});

解决方法2：直接使用Angular标准TestBed #

NativeScript Angular完全兼容Angular的原生测试工具，你也可以用和普通Angular项目一致的写法来测试，上手更熟悉：

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ItemsComponent } from "~/app/item/items.component";
import { ItemService } from "~/app/item/item.service";
import { NativeScriptModule } from "@nativescript/angular";

describe('Items Component Test with Angular TestBed', () => {
  let component: ItemsComponent;
  let fixture: ComponentFixture<ItemsComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [NativeScriptModule], // 必须导入NativeScript核心模块
      declarations: [ItemsComponent],
      providers: [ItemService] // 可以替换为Mock服务模拟依赖
    }).compileComponents();

    fixture = TestBed.createComponent(ItemsComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should be defined', () => {
    expect(component).toBeTruthy();
  });

  it('should render expected content', () => {
    const nativeElement = fixture.nativeElement;
    // 可以直接测试NativeScript原生UI元素
    expect(nativeElement.querySelector('Label').textContent).toContain('Items');
  });
});

额外优化建议 #

如果需要测试依赖服务，推荐用Mock服务替换真实实现，避免依赖外部资源：

// 创建Mock ItemService，模拟getItems方法
const mockItemService = jasmine.createSpyObj('ItemService', ['getItems']);
// 在TestBed中替换真实服务
providers: [{ provide: ItemService, useValue: mockItemService }]

内容的提问来源于stack exchange，提问作者user1261710