NS7/Angular11应用配置Karma单元测试时出现ReferenceError: window is not defined及白屏问题求助

I’ve run into this exact scenario before, and that ReferenceError: window is not defined is the key clue here. NativeScript runs in a native mobile environment—not a browser—so the window global object doesn’t exist, but your test setup is still trying to reference it somewhere. Here’s how to fix it:

Step 1: Tweak Your Karma Configuration #

Open your karma.conf.js file and optimize it for NativeScript:

• Remove any browser-specific launchers (like karma-chrome-launcher) if they were added accidentally
• Verify the only enabled launcher is karma-nativescript-launcher
• Ensure your Webpack config reference points to a test-specific setup tailored for NativeScript

Step 2: Add NativeScript Webpack Test Config #

Create or update a webpack.test.config.js file in your project root to suppress browser-specific globals:

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'window': undefined,
      'document': undefined,
      'navigator': undefined
    })
  ]
};

This tells Webpack to replace references to these browser globals with undefined, preventing the reference error when running in the NativeScript runtime.

Step 3: Validate Your Test Entry File #

Make sure your src/test.ts (or equivalent test entry) properly initializes the NativeScript Angular testing environment:

import '@nativescript/angular/testing';
import { nsTestBedInit } from '@nativescript/angular/testing';

// Initialize the NativeScript test bed before running tests
nsTestBedInit();

// Import your test specs below
import './app/tabs/tabs.component.spec';
// ... add other test files as needed

Avoid importing any browser-specific modules or polyfills here.

Step 4: Clean and Rebuild Your Environment #

Cached dependencies or configs often cause issues. Run these commands to start fresh:

# Clear node modules and lock file
rm -rf node_modules package-lock.json
npm install

# Clean NativeScript build artifacts
ns clean

# Re-initialize test setup (re-apply your karma-webpack version after this)
ns test init --force

After re-initializing, remember to manually set karma-webpack back to 5.0.0-alpha.5 in your package.json and run npm install again.

Step 5: Audit Your Test Code #

Double-check all your unit test files to ensure none directly reference window, document, or other browser APIs. If you need to mock browser-like behavior, use NativeScript-compatible mocks instead of relying on browser globals.

Once you’ve applied these changes, run ns test ios --emulator again. The app should load properly, and your tests should execute without the white screen or window error.

内容的提问来源于stack exchange，提问作者Andrew Mykhalchuk