Attempted to assign to readonly property since upgrading Angular to 2.3.1

Question

I upgraded an Angular 2.1.0 project to 2.3.1 this morning, and since then 5 of my 86 tests fail with the following error:

Failed: Attempted to assign to readonly property. set@webpack:///~/@angular/core/src/facade/errors.js:43:33 <- src/test.ts:12465:52

Here is the simplest test that is failing:

/* tslint:disable:no-unused-variable */
import {async, ComponentFixture, TestBed} from '@angular/core/testing';
import {ProfileComponent} from './profile.component';
import {TranslateModule, TranslateService} from 'ng2-translate';
import {FormsModule} from '@angular/forms';
import {ProfileService} from '../profile.service';
import {ProfileServiceStub} from '../../../testing/profile-service-stub';
import {TranslateServiceStub} from '../../../testing/translate-service-stub';
import {NotificationsServiceStub} from '../../../testing/notifications-service-stub';
import {NotificationsService} from 'angular2-notifications';

describe('ProfileComponent', () => {
  let component: ProfileComponent;
  let fixture: ComponentFixture<ProfileComponent>;
  const profileServiceStub = new ProfileServiceStub(5000);

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ProfileComponent],
      imports: [
        TranslateModule, FormsModule
      ],
      providers: [
        {provide: ProfileService, useValue: profileServiceStub},
        {provide: TranslateService, useClass: TranslateServiceStub},
        {provide: NotificationsService, useClass: NotificationsServiceStub}
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ProfileComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

I don't see any structural difference in the way the test is set up, so I guess it has something to do with something I'm doing.

And when I have a look at errors.js, the incriminated line looks like this:

set: function (message) { this._nativeError.message = message; },

I really don't know how to troubleshoot that.

Answer 1

I figured out what the problem was. I added a console.log() in the errors.js file where the error was reported and I got more information about the context. In fact I was using a stub for those tests that missed a specific EventEmitter. This triggered an error but there seems to be a bug in error reporting that prevented karma from outputting the right message.

console.log() is your friend