Failed: Errors in unit testing angular-CodePudding

I set up testing environment for a component that I would like to test, but unfortunately getting some errors which I can not get my head around..

describe('HelloWorldComponent', () => {
        let component: HelloWorldComponent;
        let fixture: ComponentFixture<HelloWorldComponent>;
        let cookieValue: string;
    
    
        beforeEach(async(() => {
            
            const cookieSvcMock = jasmine.createSpyObj<CookieService>('CookieService', ['check', 'get', 'set', 'delete']);
    
            cookieValue = 'eyJ1c2VyX2lkIjoiNGJm.....';
            mockedCookieService.check.and.returnValue(true);
            mockedCookieService.get.and.returnValue(cookieValue);

           const routes = [
            {path: '/site1', component: AnotherComponent},
            {path: '/site2', component: ComponentTwo}]
    
    
            TestBed.configureTestingModule({
                declarations: [HelloWorldComponent],
                imports: [     
                    FormsModule,
                    ReactiveFormsModule,
                    MatInputModule,
                    MatIconModule,
                    MatSlideToggleModule,
                    MatTooltipModule,
                    RouterTestingModule.withRoutes((routes)),                       
                ],
                providers: [
                    {provide: ActivatedRoute, useValue: {params: of({id: 1})}},
                    {provide: CookieService, useValue: mockedCookieService},
                ]
            }).compileComponents();
        }));
    
        beforeEach(() => {
            fixture = TestBed.createComponent(HelloWorldComponent);
            component = fixture.componentInstance;
            fixture.detectChanges();
        });
    
        it('should create', () => {
            expect(component).toBeTruthy();
        });
    
    });
    
    describe('get array of strings', () => {
    
        let helloWorldComponent = new HelloWorldComponent(null,
            new CookieService(document));
       
        it('should return array', () => {
    
            const text = '[email protected]<>';
            const textArr = ['[email protected]']
    
            let getTextArr: string[];
    
            getTextArr = helloWorldComponent.getEmails(text);
    
            expect(getTextArr).toBe(textArr);
        })
    })

But I am getting the following errors when running ng test:

HelloWorldComponent > should create 1.Error:

Failed: Component AnotherComponent is not part of any NgModule or the module has not been imported into your module.

Error: Component AnotherComponent is not part of any NgModule or the module has not been imported into your module.
    at JitCompiler._createCompiledHostTemplate (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25915:1)
    at http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25891:1
    at <Jasmine>
    at http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25888:1
    at <Jasmine>
    at JitCompiler._compileComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25877:1)
    at http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25815:1
    at Object.then (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:2166:27)
    at JitCompiler._compileModuleAndAllComponents (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25813:1)
    at JitCompiler.compileModuleAndAllComponentsAsync (http://localhost:9876/_karma_webpack_/node_modules/@angular/compiler/fesm2015/compiler.js:25775:1)

2 Error:

Error: Expected undefined to be truthy.
        at <Jasmine>
        at UserContext.<anonymous> (http://localhost:9876/_karma_webpack_/src/app/hello-world(hello-world.component.spec.ts:30:40)
        at ZoneDelegate.invoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-evergreen.js:359:1)
        at ProxyZoneSpec.onInvoke (http://localhost:9876/_karma_webpack_/node_modules/zone.js/dist/zone-testing.js:308:1)

Error for spec getArr:

InvalidTokenError: Invalid token specified: Cannot read properties of undefined (reading 'replace')

at <Jasmine>
at Object../node_modules/jwt-decode/lib/index.js (http://localhost:9876/_karma_webpack_/node_modules/jwt-decode/lib/index.js:9:1)
at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack/bootstrap:79:1)
at Module../hello-world.component.ts (http://localhost:9876/_karma_webpack_/main.js:1036:69)
at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack/bootstrap:79:1)
at Module../src/app/hello-world/hello-world.component.spec.ts (http://localhost:9876/_karma_webpack_/main.js:900:80)
at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack/bootstrap:79:1)
at Module../src/test.ts (http://localhost:9876/_karma_webpack_/src/test.ts:10:1)
at __webpack_require__ (http://localhost:9876/_karma_webpack_/webpack/bootstrap:79:1)
at checkDeferredModules (http://localhost:9876/_karma_webpack_/webpack/bootstrap:45:1)
at http://localhost:9876/_karma_webpack_/webpack/bootstrap:152:1

I'm not sure if the question is too specific, I've been hanging out here for a long time unfortunately and I'm not sure how to solve this. Any help would be greatly appreciated!

CodePudding user response：

The issue is that AnotherComponent is not declared in the TestBed. That's what the compiler is complaining about.

All components used in a test need to be declared in the TestBed (or imported via a module declaring it)

Add AnotherComponent to the TestBed declarations and you should be fine:

TestBed.configureTestingModule({
                declarations: [HelloWorldComponent, AnotherComponent],
...

You might have to add dependencies of the AnotherComponent to your declarations/providers/imports.