Thugfix Thursday: Angular and Jasmine/Karma: Empty unit tests failing with "TypeError: Cannot read properties of undefined (reading"

Why do empty unit tests sometimes fail in Angular? All we have is an async beforeEach, a standard beforeEach that initializes the fixture and component, and...an empty it should create block:

describe("UserDevicesComponent", () => {
  let component: UserDevicesComponent;
  let fixture: ComponentFixture<UserDevicesComponent>;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        HttpClientTestingModule,
        FormsModule
      ],
      declarations: [
        UserDevicesComponent,
        AppComponent,
        NavComponent,
        FooterComponent,
        PhonePipe
      ],
      schemas: [
          CUSTOM_ELEMENTS_SCHEMA
        ],
    }).compileComponents();
  }));

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

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

This shouldn't fail, you know? Like...It's an empty unit test. 

But in some case, it does. The fixture.detectChanges() section will generally fail if this particular error occurs. Comment it out, and your empty unit test will pass. 

Why on earth does this occur? Errors don't get you much. Most are like this: 

TypeError: Cannot read properties of undefined (reading 'basically_anything')

Also see an earlier blog post in which I reference this here. With this bug it's super easy to spend hours and hours trying to fix an extremely basic innerHTML test. 

If you are experiencing this issue, look into your component file. You may find something like this: 

 @Input() user: User | any;

These inputs have to be defined, particularly if they're referenced anywhere in the corresponding HTML file. And considering that this should effectively be 100% of the time...yeah, you're probably going to encounter it. 

In my case it was all over the place in the HTML file. Example:

 <ng-container *ngIf="account.plan && user && user.roles">

Through further perusal, I note that the user references expect roles and adminRoles as properties. So we define them in our unit test, including whatever functions are expected. From this particular line in the ngIf of the HTML file, I see that adminRoles.includes is necessary to mock up:

user.adminRoles.includes(3)

Now, re-run:

describe("UserDevicesComponent", () => {
  let component: UserDevicesComponent;
  let fixture: ComponentFixture<UserDevicesComponent>;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule,
        HttpClientTestingModule,
        FormsModule
      ],
      declarations: [
        UserDevicesComponent,
        AppComponent,
        NavComponent,
        FooterComponent,
        PhonePipe
      ],
      schemas: [
          CUSTOM_ELEMENTS_SCHEMA
        ],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(UserDevicesComponent);
    component = fixture.componentInstance;
    component.user = {roles: 1, adminRoles: {includes: function(){}}}
    fixture.detectChanges();
  });

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

...And now it passes. 

Note that the errors I got included variables that weren't even in here, such as netId. 

Also, I am SO sorry for calling this "Thugfix Thursday" because of how stupid it sounds but it's better than "Bugfix Thursday". And now it's time to actually write the tests...

websh*t moment

key phrases because idc enough to look into this seo for this blog: 

  • angular fixture.detectChanges fails unit test
  • typeerror: cannot read properties of undefined empty unit test
  • angular empty unit test failing

Comments

Post a Comment

Popular posts from this blog

Unleashing my inner Disney Princess ✩₊˚.⋆☾⋆⁺₊✧ at the 2024 Disney Princesses Half Marathon

Image
TL;DR it was amazing and perfect  and we are going to make this an annual tradition. I may edit this with photos later, but I'm probably going to forget.  Recently, I spent 5 wonderful days donating my dollarbucks and soul to the evil mouse in Orlando. I did it for the Disney Princess Half Marathon.  Just look at that happy little alligator musician. He's so CHONKY. It's adorable. I love him. How could you NOT run a half marathon for him when he's cheering you on?  (My dad says it's weird to say the word "adorable" as a man, which makes zero logical sense and obviously means I need to use that word as often as possible. I will also continue to wear my rings and maybe I'll start flashing my pink protein shaker. Just to cause a little discomfort, because it's funny.)  I haven't seen the movie yet actually so idk if the gator is a major character or not. But JUST LOOK AT HIM.  My cousin and I had been planning a Disney trip, specifically centered
Read more

The 20-something types of Computer Science majors

Image
I've been way too distracted with this blog lately, and I need to hurry up and start getting crap done. But...I've been dying to write this lol.  The advanced neckbeard A rare variety. When a neckbeard is forced out of his mom's basement and into college, he becomes an Advanced Neckbeard. You can always tell when he's coming, because you can smell him from half a mile away. He is very overweight, and wears shirts that are either plain or adorned with anime/gaming graphics. These shirts are either stained with sweat, Hot Cheetos, or something a little bit more, ah, suspicious . He is so socially unskilled that he makes everyone else in the major look normal. Age 30+, GPA at a 2.0 or just barely above it. Will never drop the major despite his lack of effort, because he simply doesn't care if he gets bad grades. In fact, he is probably highly intelligent, but his grades will never reflect that. Nevertheless, he will get a much higher paying job than a regular neckbeard
Read more

The Evenstar

I've never liked this world much.  Ever since I was a little kid, I always dreamed of going somewhere else. I created this alternate version of Earth that had everything and everyone that I loved, but with all these improvements to it. Magic was real. So were dragons. Dinosaurs hadn't gone extinct. Technology allowed people to fly. A network of glass corridors provided transport between this world and mine, snaking through streams of stars, galaxies, and lightyears of blackness.  And more than anything, I wasn't alone. I don't remember why I spent so much time alone as a kid. I really wish I did. All I know is that when I was in my  world, I always had someone by my side.  The feeling of being out of place here was overwhelming. It still is. That sense of not belonging, of longing for somewhere else, it has never gone away.  When I was in middle school, being bullied daily, I escaped to that world. The boys who tripped me and spit on me disappeared, replaced by tropical
Read more