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

Question

I'm setting up a NativeScript-Angular project, and would like to implement unit tests using Jasmine-Karma in order to test my components using css selectors. How can I setup a simple unit test (beyond the sample test provided on the official repository) for a simple component?

This is for a new project using NativeScript CLI 6.0 with Android API level 28.

I have tried using the regular Angular TestBed which is claimed to be supported on this blog post: https://www.nativescript.org/blog/announcing-the-nativescript-4.1-release

I have also tried following their working tests on the official nativescript-angular repository: https://github.com/NativeScript/nativescript-angular/tree/master/tests

Either way I seem to be doing something wrong when I try to do my own implementation because I get the following errors:
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

Has anyone managed to get TestBed unit tests working in NativeScript with 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();
    });
  })
});

I am expecting to be able to run the test without getting any errors.

I have included two repos for each test implementation.
Steps to reproduce:
1. Download repo
2. yarn install
3. tns test android

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

update

for anyone else wondering how to further test their front-end using end to end tests it seems like appium is the go to https://docs.nativescript.org/plugins/ui-tests

I think your question is so huge for others to see and try to answer , Please try to make it a bit short and specific about your issue , If you have multiple question try to make one for each — Abdulrahman Falyoun
Yeah I agree I am working on making minimal reproduction steps and repos at the moment. — George S
I've edited my question to be more bare-bones and my question to be clearer. If any readers would like me to make further simplifications please let me know. — George S
This is the exact issue I'm having as well. IMO, after adding testing to project with tns test init, performing an action like ng generate service Foo should result in foo.service.spec.ts being included in the tests. However, even after manual intervention as you have here, I can't for the life of me get it to work. — Miles

hypery2k hypery2k · Accepted Answer · 2019-11-01T03:13:10

To use TestBed you have to alter your karma.conf.js to:

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

The file src/tests/setup.ts should look like this for jasmine:

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

or if using mocha:

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

You'll find a sample here: https://github.com/hypery2k/tns_testbed_sample

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

3 Answers