typescript - Angular test accessing other component

Question

I'm try to setup my angular testing, but the test is trying to load a component outside the component I'm trying to test:

The component is a simple language selector:

language.component.ts:

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-language',
  templateUrl: './language.component.html',
  styleUrls: ['./language.component.scss'],
})
export class LanguageComponent implements OnInit {
  current: string;
  langs: string[];

  constructor(public translate: TranslateService) {}

  ngOnInit(): void {
    this.langs = this.translate.getLangs();
    this.current = this.translate.currentLang;
  }

  setLang(lang: string) {
    this.translate.use(lang);
    this.current = lang;
    localStorage.setItem('translation.language', lang);
  }
}

language.component.spec.ts:

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { MatMenuModule } from '@angular/material/menu';
import { TranslateModule } from '@ngx-translate/core';
import { LanguageComponent } from './language.component';

fdescribe('LanguageComponent', () => {
  let component: LanguageComponent;
  let fixture: ComponentFixture<LanguageComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [LanguageComponent],
      imports: [TranslateModule.forRoot(), MatMenuModule],
    }).compileComponents();
  });

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

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

  afterEach(() => {
    fixture.destroy();
  });
});

language.component.html:

<button mat-icon-button [matMenuTriggerFor]="Lang">{{ this.current }}</button>
<mat-menu #Lang="matMenu">
  <button
    mat-menu-item
    *ngFor="let lang of langs"
    [value]="lang"
    (click)="setLang(lang)"
  >
    {{ 'languages.' + lang | translate }}
  </button>
</mat-menu>

As you can see I'm using a fdescribe so it only tests that specific component. However following error is thrown:

  An error was thrown in afterAll
  Uncaught ReferenceError: Cannot access 'ShellComponent' before initialization
  ReferenceError: Cannot access 'ShellComponent' before initialization
      at Module.ShellComponent (http://localhost:9876/_karma_webpack_/main.js:39178:113)
      at Module.ShellComponent (http://localhost:9876/_karma_webpack_/main.js:27719:172)
      at Module.ShellComponent (http://localhost:9876/_karma_webpack_/main.js:37580:162)
      at Module.i2L+ (http://localhost:9876/_karma_webpack_/src/app/_shared/shared.module.ts:36:5)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack/bootstrap:84:1)
      at Module.LEUy (http://localhost:9876/_karma_webpack_/main.js:17430:72)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack/bootstrap:84:1)
      at Module.oPWF (http://localhost:9876/_karma_webpack_/main.js:34920:68)
      at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack/bootstrap:84:1)
      at Module.05o4 (http://localhost:9876/_karma_webpack_/main.js:1768:72)

The ShellComponent is the one importing the LanguageComponent but I have no clue why it's trying to access it for this test.

Google said to put the emitDecoratorMetadata on false, but this changed nothing. Other then that I haven't found anything to resolve this issue

Greeting

question from:https://stackoverflow.com/questions/65626816/angular-test-accessing-other-component

Answer 1

Waitting for answers