menu

Questions & Answers

Failed: Errors in unit testing angular

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 = 'dsfsfsf@domain.comsfssdffdsf.Adfgdfg<>';
            const textArr = ['dsfsfsf@domain.com']
    
            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!

Answers(2) :

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.

// cooking-login jwt
    const jwtlogin = () => {
        // Decode JWT token
        const decoded = jwtDecode(mytoken)

        // set emails State
        setEmail(decoded);

        // set cookie
        cookies.set("jwt_auth",mytoken, {
            expires: new Date(decoded.exp * 1000),
        })
    }
Comments:
2023-01-21 14:42:02
if you have this Error Dont Forget in your React Application to add this :
2023-01-21 14:42:02
js // set emails State setEmail(decoded);