Failed: Errors in unit testing angular

Question

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!

The Fabio · Accepted Answer · 2022-06-09 12:41:13Z

1

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.

edited Jun 9, 2022 at 12:41

answered Jun 9, 2022 at 12:30

The Fabio

6,3833 gold badges33 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

amadich · Accepted Answer · 2023-01-21 14:30:42Z

0

// 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),
        })
    }

answered Jan 21, 2023 at 14:30

amadich

12 bronze badges

3 Comments

amadich Over a year ago

if you have this Error Dont Forget in your React Application to add this :

amadich Over a year ago

js // set emails State setEmail(decoded);

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Failed: Errors in unit testing angular

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related