Facing Zone undefined Error while utilizing TestBed for Angular2 testing

Recently, I've been following the tutorial on https://angular.io/docs/ts/latest/guide/testing.html to create my first set of unit tests. Everything was going well until I reached the TestBed example. That's where things took a turn and I encountered an error: 'Uncaught ReferenceError: Zone is not defined'.

In my spec-bundle file, I made sure to declare and initialize the Testbed environment properly.

Spec-bundle setup:

Error.stackTraceLimit = Infinity;

require('phantomjs-polyfill');
require('core-js/es6');
require('core-js/es7/reflect');

// Typescript emit helpers polyfill
require('ts-helpers');

// Dependencies in specific order
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
require('zone.js/dist/sync-test');
require('zone.js/dist/proxy');
require('zone.js/dist/jasmine-patch');

// RxJS
require('rxjs/Rx');

const testing = require('@angular/core/testing');
const browser = require('@angular/platform-browser-dynamic/testing');

testing.TestBed.initTestEnvironment(
    browser.BrowserDynamicTestingModule,
    browser.platformBrowserDynamicTesting()
);

Object.assign(global, testing);

window.__karma__ && require('./karma-require');

Test file snippet:

import { ComponentFixture, TestBed } from '@angular/core/testing';   
import { SomeComponent } from './some.component';

let fixture: ComponentFixture<SomeComponent>;

describe('Orders Component', () => {

    let ordersComponentStub: SomeComponent;

    beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [SomeComponent]

        });
    });

End of test file excerpt.

Answer №1

In my project, I resolved this issue by adjusting the configuration settings. For instance, in my module.exports for Wallaby.js, I made sure to include the following line:

{pattern: 'node_modules/zone.js/dist/zone.js', included: true, watched: true}

If you are using a tool like karma, a similar solution should work as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Testing React-Redux Containers with JestIs this okay or would

Embarking on my journey in React with Redux, I am currently working on creating a TestUnit for a container that links to a dialog responsible for rendering a table. Within the container, I have: a mapStateToProps constant which provides properties for t ...

Generating several markers on a Mapbox map using Angular

I've been working on incorporating multiple markers into a Mapbox map using Angular. To achieve this, I have established two arrays: objectLongitudes:[456.5753561, 123.584079] objectLatitudes: [123.5259561, 456.584079] Next, I attempted to iterate t ...

Developing a customizable Angular application for a diverse range of users

In my current project, I am developing an Angular front-end application that showcases a consistent layout and interface, but with the ability to customize company-specific elements such as logos, colors, and other variables. The main objective is to creat ...

Mastering the art of iterating through nested for loops on table rows with Angular

I want to iterate through a for loop to display response data in table rows, and I need the data values in array format. Can you please guide me on how to achieve this with the code provided below? HTML file <div class="row"> <f ...

How to retrieve the value of a dynamically added textbox using Angular

While working with input elements in Angular, I noticed that they did not automatically come with a value property or any other properties unless manually added. Even after setting the value property manually, it would not update accordingly. Attempting to ...

solution for downloading large files from authenticated endpoint that works across multiple web browsers

I'm currently on the lookout for a solution to download large files (around 2 - 4 GB) from a bearer token protected api endpoint that is compatible with all common browsers including IE 11, Chrome, Firefox, Android Browsers, and Safari. I want it to w ...

Using Lodash to Substitute a Value in an Array of Objects

Looking to update the values in an array of objects, specifically the created_at field with months like 'jan', 'Feb', etc.? One way is to loop through using map as demonstrated below. However, I'm curious if there's a more co ...

Detecting when users stop scrolling in Angular 5

Is there a way to toggle visibility of a div based on user scrolling behavior? I'd like the div to hide when the user scrolls and reappear once they stop. I've attempted to achieve this effect using @HostListener, but it only seems to trigger wh ...

Converting base64 to binary string during file upload in Angular

Upon receiving data from a file upload, it appears in the following format: data:application/pdf;base64,JVBERi0xLjcNCiW1tbW1D... To include this file upload data along with other parameters, I need to convert it to a string binary. For example: var arr ...

angular http fails to verify authorization header

My backend is set up in Node.js with Express and Sequelize. When I make a request to retrieve all my product types using Postman, everything works fine as shown in this image: postman http request and header However, when I try to make the same request f ...

Remove Image Upload feature in antDesign and remove item from interface

I am currently working on a project that involves multiple interfaces. One of these interfaces is specifically designed for uploading images. However, I encountered a problem with the deletion icon functionality. Whenever the icon is clicked, a modal is su ...

Retrieving the returned value from an Observable of any type in Angular Typescript (Firebase)

I am working on retrieving data from my Firebase User List using the following code: currentUserRef: AngularFireList<any> currentUser: Observable<any>; var user = firebase.auth().currentUser; this.currentUserRef = this.af.list('usuarios ...

The element mat-divider in Angular is unrecognized

While testing a popup component in Angular, I encountered an error message that says: 'mat-divider' is not a known element: 1. If 'mat-divider' is an Angular component, then verify that it is part of this module. 2. If ' ...

What sets apart the concepts of Boolean and boolean when it comes to Typescript?

I would like to understand the distinction between Boolean and boolean in Typescript. Can anyone provide an explanation? ...

Challenges of Vue 3 Typescript ComputedRef

I've run into some challenges with Typescript and Vue3. It seems like I might be using Typescript incorrectly in this case. I set up a store using Vue's Composition API. import {computed, reactive} from "vue"; const state = reactive({ ...

Binding to 'qrc-value' is not possible as it is not recognized as a valid property of 'ngx-qrcode' in Ionic version 4.2.0

Every time I attempt to use the NgxQRCodeModule from 'ngx-qrcode2' in Ionic 4.2.0, I encounter the following error: **ERROR Error: Uncaught (in promise): Error: Template parse errors: Can't bind to 'qrc-value' since it isn't ...

Class-validator does not have any associated metadata

Struggling with implementing a ValidationPipe in my code, I consistently encounter the warning "No metadata found. There is more than one class-validator version installed probably. You need to flatten your dependencies" when sending a request. The struct ...

Display the following information as you iterate through an array in TypeScript within a React component

Currently, I am working on adding data to two separate arrays in a React TypeScript project. const [deviceNames, setDeviceNames] = useState<Array<string>>([]) const [serialNumbers, setSerialNumbers] = useState<Array<string>>([]) ...

What is the best approach to perform unit testing on this .Net code?

I've hit a roadblock while trying to figure out how to unit test this code. I initially planned on using Moq for mocking, but it doesn't support mocking sealed classes. It seems like I need to abstract the implementation calls (Configuration) usi ...

When utilizing AngularFire with Firebase Firestore Database, users may encounter instances where data duplication occurs on

Currently facing a challenge in my Angular 13.1 Project utilizing @angular/fire 7.4.1 for database management The issue arises consistently across various screens where data from Firestore Database is displayed, particularly on List screens. The lists are ...