2

So I decided to add unit testing to my NS7/NG11 app, followed instructions from NS website and got to the point where the app would start but the screen is blank (all white).

Initialized tests with ns test init, manually updated karma-webpack in package.json to v 5.0.0-alpha.5 as the default one had a bug that was fixed and should be released soon.

Command used to start testing is: ns test run --emulator

Testing in Tabs template with Angular. When running ns run ios --emulator the runs just fine and is usable.

Below is my package.json:

{
  "name": "@nativescript/template-tab-navigation-ng",
  "main": "main.js",
  "displayName": "Tabs",
  "templateType": "App template",
  "version": "7.0.6",
  "description": "NativeScript Application",
  "author": "NativeScript Team <oss@nativescript.org>",
  "license": "SEE LICENSE IN <your-license-filename>",
  "publishConfig": {
    "access": "public"
  },
  "keywords": [
    "nstudio",
    "nativescript",
    "mobile",
    "angular",
    "{N}",
    "tns",
    "template",
    "tab",
    "navigation",
    "category-general"
  ],
  "repository": "<fill-your-repository-here>",
  "homepage": "https://github.com/NativeScript/nativescript-app-templates",
  "bugs": {
    "url": "https://github.com/NativeScript/NativeScript/issues"
  },
  "scripts": {
    "lint": "tslint \"src/**/*.ts\""
  },
  "dependencies": {
    "@angular/animations": "~11.0.0",
    "@angular/common": "~11.0.0",
    "@angular/compiler": "~11.0.0",
    "@angular/core": "~11.0.0",
    "@angular/forms": "~11.0.0",
    "@angular/platform-browser": "~11.0.0",
    "@angular/platform-browser-dynamic": "~11.0.0",
    "@angular/router": "~11.0.0",
    "@nativescript/angular": "~11.0.0",
    "@nativescript/core": "~7.1.0",
    "@nativescript/theme": "~2.3.0",
    "@nativescript/unit-test-runner": "^1.0.2",
    "reflect-metadata": "~0.1.12",
    "rxjs": "^6.6.0",
    "zone.js": "~0.11.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~11.0.0",
    "@nativescript/ios": "7.1.0",
    "@nativescript/webpack": "~4.0.0",
    "@ngtools/webpack": "~11.0.0",
    "@types/jasmine": "3.6.2",
    "codelyzer": "~6.0.0",
    "karma": "6.0.0",
    "karma-jasmine": "4.0.1",
    "karma-nativescript-launcher": "0.4.0",
    "karma-webpack": "5.0.0-alpha.5",
    "node-sass": "^4.14.1",
    "tslint": "~6.1.3",
    "typescript": "~4.0.0"
  },
  "private": "true",
  "readme": "NativeScript Application"
}

and here's the console output when I run ns test ios --emulator:

Webpack compilation complete. Watching for file changes.
Webpack build done!
Updating runtime package.json with configuration values...
Project successfully prepared (ios)
Successfully transferred all files on device DF60258A-B86C-4E93-BCEF-4E2ED154E007.
Restarting application on device DF60258A-B86C-4E93-BCEF-4E2ED154E007...
Successfully synced application org.nativescript.karmans7 on device DF60258A-B86C-4E93-BCEF-4E2ED154E007.
(RunningBoardServices) [com.apple.runningboard:connection] Identity resolved as application<org.nativescript.karmans7>
CONSOLE LOG: NSUTR: fetching http://127.0.0.1:9877/context.json
CONSOLE LOG: NSUTR: fetching http://172.16.1.6:9877/context.json
CONSOLE LOG: NSUTR: fetching http://172.16.1.4:9877/context.json
CONSOLE LOG: NSUTR: found karma at 127.0.0.1
CONSOLE LOG: NSUTR: found karma at 172.16.1.4
CONSOLE LOG: NSUTR: found karma at 172.16.1.6
CONSOLE LOG: NSUTR: connecting to karma at http://127.0.0.1:9877
CONSOLE LOG: ReferenceError: window is not defined
Andrew Mykhalchuk
  • 354
  • 3
  • 10
  • Have you found a solution to this? I am encountering the same issue with the out-of-the-box Vue setup. – Stephen Jan 26 '21 at 00:12
  • 1
    After switching to a newer version of Node (14.15.4) and updating NativeScript, I now get `JS: ReferenceError: window is not defined` instead of `CONSOLE LOG: ReferenceError: window is not defined`. So not much progress. – Stephen Jan 27 '21 at 18:04
  • 1
    I reached out to the NS team on Twitter and they said this is a known issue. "We were planning a number of test runner updates to coincide with the planned 8.0 release but will see what we can do to deliver something in the interim here." – Stephen Jan 28 '21 at 15:39

2 Answers2

1

It's an issue with NativeScript and Karma. They recommend using "karma": "5.2.3", in the meantime.

This also fixed it for me.

Utukku
  • 1,315
  • 1
  • 10
  • 6
0

NativeScript does not have a window object like a browser does. So any code that needs to pretend it is running in a browser, you basically need to add a global window object.

At the very top of your app.ts (or main.ts) depending on the NS flavor; add the line:

global.window = {}; or global.window = global (If you are using TS, you will have to do (<any>global). otherwise TypeScript will probably complain about global not being the correct type...

and that should fix the issue.

Nathanael
  • 5,369
  • 18
  • 23