I tried to use Angular TestBed as described on angular.io website to test a simple component, but I get errors like: TypeError: undefined is not an object (evaluating 'ProxyZoneSpec.assertPresent')
and 404 as it cannot load the external component template.
If I create a sample unit test, without using/setting up TestBed, it works correctly, therefore at least Karma and Jasmine are set up correctly for the project. The problem is related to Angular TestBed. Is there any other documentation than angular.io? as following those docs it does not seem to work.
karma.conf.js
var webpackConfig = require('./webpack/webpack.dev.js');
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'./app/polyfills.ts',
'./app/**/*.spec.ts',
],
exclude: [ ],
preprocessors: {
'./app/polyfills.ts': ['webpack', 'sourcemap'],
'./app/**/*.spec.ts': ['webpack', 'sourcemap']
},
webpack: {
devtool: 'inline-source-map',
module: webpackConfig.module,
resolve: webpackConfig.resolve
},
mime: {
'text/x-typescript': ['ts', 'tsx']
},
reporters: ['progress', 'junit', 'tfs'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false,
concurrency: Infinity
})
}
component.ts
import { Input, Component } from "@angular/core";
@Component({
selector: "user-contact",
templateUrl: "./user-contact.component.html",
styleUrls: ["./userContact.scss"],
})
export class UserContactComponent {
@Input()
public name: string;
}
component.spec.ts
import { ComponentFixture, TestBed, async } from "@angular/core/testing";
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting,
} from "@angular/platform-browser-dynamic/testing";
import { By } from "@angular/platform-browser";
import { DebugElement } from "@angular/core";
import { UserContactComponent } from "./user-contact.component";
// zone.js
import "zone.js/dist/proxy";
import "zone.js/dist/sync-test";
import "zone.js/dist/async-test";
// Without this import I get the following error:
// Expected to be running in 'ProxyZone', but it was not found
import "zone.js/dist/jasmine-patch";
TestBed.initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
);
describe("Component: user contact", () => {
let component: UserContactComponent;
let fixture: ComponentFixture<UserContactComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [UserContactComponent],
})
.compileComponents();
}));
it("should have a defined component", () => {
fixture = TestBed.createComponent(UserContactComponent);
component = fixture.componentInstance;
fixture.detectChanges();
expect(this.component).toBeDefined();
});
})
@BartBiczBozy, your answer "I had similar issue and moving angular imports below zone imports helped." fixed my issue. I have been struggling with this all day! Thank you!
To others searching for answers, my test.ts looks like this now
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
I did not end up having to make any changes to my karma.conf.js files array. It only contains my spec files pattern.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With