CODEWITHSUNDEEP
angularnativescriptkarma-runnernativescript-angularkarma-webpack
Andrew Mykhalchuk
Andrew Mykhalchuk

Reputation: 404

NativeScript Angular + Karma - ReferenceError: window is not defined

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 <[email protected]>",
  "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

Upvotes: 2

Views: 1064

Answers (2)

Utukku
Utukku

Reputation: 1375

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

This also fixed it for me.

Upvotes: 1

Nathanael
Nathanael

Reputation: 5399

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.

Upvotes: 0

Related Questions