nativescript-angular: NG11 Test failure : Error: zone-testing.js is needed for the async() test helper but could not be found.

Not sure if it will be useful in you case but I just fixed a similar error by changing the import order of zone-testing in my src/test.ts file :

import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';

Not sure if it will be useful in you case but I just fixed a similar error by changing the import order of zone-testing in my src/test.ts file :

import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';

Actually thanks for that hint… never thought it could be the order of imports… Just as a small addition to this.

The import of zone-testing has to be the very first of all imports. Line 1 - import 'zone.js/dist/zone-testing';

Add this to setup.Jest.ts file in the root folder:

import 'zone.js';
import 'zone.js/testing';

Not sure if it will be useful in you case but I just fixed a similar error by changing the import order of zone-testing in my src/test.ts file :

import 'zone.js/dist/zone-testing';
import { getTestBed } from '@angular/core/testing';

Actually thanks for that hint… never thought it could be the order of imports… Just as a small addition to this.

The import of zone-testing has to be the very first of all imports. Line 1 - import 'zone.js/dist/zone-testing';

it worked, but is there any explanation for this?

Not sure if this helps, but I was able to get my NS7/NG11 app to run Jasmine/Karma unit tests. I had to do some serious package testing (dependency validation) to see what works, but all good.

package.json

{
  "description": "NativeScript Mobile Template",
  "license": "SEE LICENSE",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/animations": "11.2.6",
    "@angular/common": "11.2.6",
    "@angular/compiler": "11.2.6",
    "@angular/core": "11.2.6",
    "@angular/forms": "11.2.6",
    "@angular/platform-browser": "11.2.6",
    "@angular/platform-browser-dynamic": "11.2.6",
    "@angular/router": "11.2.6",
    "@nativescript/angular": "11.0.1",
    "@nativescript/core": "7.3.0",
    "@nativescript/theme": "3.0.1",
    "@nativescript/unit-test-runner": "1.0.2",
    "@nativescript/webpack": "3.0.9",
    "base-64": "1.0.0",
    "crypto-js": "4.0.0",
    "reflect-metadata": "0.1.13",
    "rxjs": "6.6.6",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular/compiler-cli": "11.2.6",
    "@nativescript/android": "7.0.1",
    "@nativescript/ios": "7.2.0",
    "@nativescript/types": "7.3.0",
    "@ngtools/webpack": "11.2.5",
    "@types/jasmine": "3.6.7",
    "istanbul-instrumenter-loader": "3.0.1",
    "jasmine-core": "3.6.0",
    "jasmine-spec-reporter": "6.0.0",
    "karma": "6.1.2",
    "karma-coverage": "2.0.3",
    "karma-coverage-istanbul-reporter": "3.0.3",
    "karma-jasmine": "4.0.1",
    "karma-nativescript-launcher": "0.4.0",
    "karma-sourcemap-loader": "0.3.8",
    "karma-spec-reporter": "0.0.32",
    "karma-typescript": "5.5.0",
    "karma-webpack": "3.0.5",
    "typescript": "4.0.2"
  },
  "main": "main.js"
}

karma.config.js

module.exports = function (config) {
  const options = {
    basePath: '',
    frameworks: ['jasmine'],

    plugins: [
      'karma-jasmine',
      'karma-coverage-istanbul-reporter',
      'karma-coverage',
      'karma-webpack',
      'karma-nativescript-launcher',
      'karma-sourcemap-loader',
      'karma-spec-reporter'
    ],

    files: [
      'src/tests/setup.ts',
      'src/tests/**/*.spec.ts',
      'src/app/**/*.ts'
    ],

    exclude: [
    ],

    preprocessors: {
      'src/tests/setup.ts': ['webpack'],
      'src/tests/**/*.spec.ts': ['webpack'],
      'src/app/**/*.ts': ['webpack', 'coverage']
    },

    reporters: ['progress', 'coverage', 'coverage-istanbul'],

    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, 'coverage'),
      reports: ['html', 'lcov', 'text-summary'],
      fixWebpackSourcePaths: true
    },

    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: [],
    singleRun: false,

    customLaunchers: {
      android: {
        base: 'NS',
        platform: 'android'
      },
      ios: {
        base: 'NS',
        platform: 'ios'
      },
      ios_simulator: {
        base: 'NS',
        platform: 'ios',
        arguments: ['--emulator']
      }
    }
  };

  setWebpack(config, options);

  config.set(options);
}

function setWebpack(config, options) {
  if (config && config.bundle) {
    const env = {};
    env[config.platform] = true;
    env.sourceMap = config.debugBrk;
    env.appPath = config.appPath;
    options.webpack = require('./webpack.config')(env);
    options.webpack.module.rules.push(
      {
        test: /\.ts$/,
        use: {
          loader: "istanbul-instrumenter-loader",
          options: {
            esModules: true
          }
        },
        enforce: 'post'
      }
    );
    delete options.webpack.entry;
    delete options.webpack.output.libraryTarget;
    const invalidPluginsForUnitTesting = ["GenerateBundleStarterPlugin", "GenerateNativeScriptEntryPointsPlugin"];
    options.webpack.plugins = options.webpack.plugins.filter(p => !invalidPluginsForUnitTesting.includes(p.constructor.name));
  }
}

setup.ts (customized and placed in the root of the ‘tests’ folder):

import '@nativescript/zone-js';
import 'zone.js/dist/zone-testing';

import { TestBed } from '@angular/core/testing';
import { platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { BrowserTestingModule } from '@angular/platform-browser/testing';

export function customNsTestBedInit(): void {
  TestBed.initTestEnvironment(
    BrowserTestingModule,
    platformBrowserDynamicTesting()
  );
}

export function customNsTestBedBeforeEach(
  components: any[],
  providers: any[] = [],
  imports: any[] = [],
  entryComponents: any[] = []) {
  return (done: () => void) => {
    if (entryComponents.length === 0) {
      TestBed.configureTestingModule({
        declarations: [ ...components ],
        providers: [ ...providers ],
        imports: [ ...imports ]
      });
    }
    TestBed.compileComponents()
      .then(() => done())
      .catch((e) => {
        console.log(`Failed to instantiate test component with error: ${e}`);
        console.log(e.stack);
        done();
      });
  };
}

export function customNsTestBedAfterEach(resetEnv = true, resetFn = customNsTestBedInit): void {
  TestBed.resetTestingModule();
  if (resetEnv) {
    TestBed.resetTestEnvironment();
    resetFn();
  }
}

// Note. This testing infrastructure can test components but it
// can only test the functions. No rendering of the dom is done
// Nativescript runs its own zone.js which intereferes with the
// zone.js code run by NG10. So my test suite completely disables
// the nativescript code and it should not execute anywhere.
// ** In testing if you inject something that calls any nativescript
// code it will reactivate the nativescript zone.js. make sure to stub
// this out so that it does not interfere with the unit test.


/// intialize Test bed.
customNsTestBedInit();

feedback.component.spec.ts (a spec file with a few tests)

import { TestBed } from '@angular/core/testing';
import { customNsTestBedAfterEach, customNsTestBedBeforeEach } from '../setup';

import { Page } from '@nativescript/core';
import { RouterTestingModule } from '@angular/router/testing';

import { FeedbackComponent } from "~/app/common/feedback/feedback.component";

describe('Initialize', () => {
  beforeEach(
    customNsTestBedBeforeEach(
      [],
      [
        FeedbackComponent,
        Page
      ],
      [
        RouterTestingModule
      ]
    )
  );

  afterEach(() => customNsTestBedAfterEach());

  describe('Component Tests -', () => {
    let component: FeedbackComponent;

    beforeEach(() => {
      component = TestBed.inject(FeedbackComponent);
    });

    describe('FeedbackComponent', () => {
      it('should resolve component', () => {
        expect(component).toBeTruthy();
      });

      it('should initialize variables', () => {
        expect(component.isTablet).toBeDefined();
        expect(component.timer).toBeNull();
      });

      it('should call showFeedback()', () => {
        spyOn(component, 'showFeedback');
        component.showFeedback("test");
        expect(component.showFeedback).toHaveBeenCalledWith('test');
      });

      it('should verify showFeedback() parameters', () => {
        spyOn(Page.prototype, 'getViewById').and.callThrough();
        component.showFeedback("test");
        expect(Page.prototype.getViewById).toHaveBeenCalledWith('feedbackLayout');
        expect(Page.prototype.getViewById).toHaveBeenCalledWith('feedbackFrame');
        expect(Page.prototype.getViewById).toHaveBeenCalledWith('feedbackMessage');
        expect(Page.prototype.getViewById).toHaveBeenCalledWith('feedbackClose');
      });

      it('should call hideFeedback()', () => {
        spyOn(component, 'hideFeedback');
        component.hideFeedback();
        expect(component.hideFeedback).toHaveBeenCalled();
      });

      it('should verify hideFeedback() parameters', () => {
        spyOn(Page.prototype, 'getViewById');
        component.hideFeedback();
        expect(Page.prototype.getViewById).toHaveBeenCalledWith('feedbackLayout');
      });
    });
  });
});