NativeScript Angular + Karma - ReferenceError：未定义窗口

问题描述

因此，我决定将单元测试添加到我的 NS7/NG11 应用程序中，按照 NS 网站上的说明进行操作，直到应用程序启动但屏幕为空白（全白）。

使用 ns test init 初始化测试，手动将 karma-webpack 中的 package.json 更新为 v 5.0.0-alpha.5，因为默认的有一个错误已修复，应尽快发布。>

用于开始测试的命令是：ns test run --emulator

使用 Angular 在 Tabs 模板中进行测试。运行 ns run ios --emulator 时运行良好且可用。

下面是我的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"
}

这是我运行 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

解决方法

这是 NativeScript 和 Karma 的问题。他们建议使用 "karma": "5.2.3", 同时。

这也为我修好了。

NativeScript 不像浏览器那样有 window 对象。所以任何需要假装它在浏览器中运行的代码，你基本上都需要添加一个全局窗口对象。

根据 NS 风格，在 app.ts（或 main.ts）的最顶部；添加行：

global.window = {}; 或 global.window = global （如果您使用的是 TS，则必须执行 (<any>global). 否则 TypeScript 可能会抱怨 global 不是正确的类型...

这应该可以解决问题。

angular angular karma-runner karma-webpack nativescript-angular